Vue で PC アドレスをモバイル アドレスにリダイレクトする方法

Vue で PC アドレスをモバイル アドレスにリダイレクトする方法

要件:PC側とモバイル側は2つの独立したプロジェクトです。2つのプロジェクトの内容は基本的に同じで、リンクの組み合わせ方には規則性があります。要件は、モバイル側でPC側のURLリンクにアクセスすると、モバイル側の対応するページにリダイレクトすることです。

この要件を実装する方法は比較的明確です。私の一般的なアイデアは、ルーティング ガードで各着信ルーティング要求を監視し、その要求がモバイル端末によってアクセスされているかどうかを分析することです。アクセスされていない場合は、ルーティング要求は直接リリースされます。アクセスされている場合は、入力するルーティング パスが分析され、パス内の必要なフィールドが抽出され、その組み合わせが新しいモバイル端末リンクと呼ばれます。

これには、1. ルーティング ガード、2. クライアント判断、3. 正規表現テキスト抽出という 3 つの知識ポイントが含まれます。次に、これらのポイントを 1 つずつ説明し、開発プロセス全体のソース コードを添付して、参照、学習、または批判できるようにします。

1. ルーティングガード

  • へ: 入るルート
  • from: どのルートからアクセスするか
  • next: ルーティング制御パラメータ。一般的に使用される next(true) と next(false)
//すべてのルーティング要求はルーティングガードを通過します。
router.beforeEach((to, from, next) => {
	
    //アクセスリンク: http://localhost/page/detail/IUKGEQ/108/9933/32279/8
    //アクセス パスは次のとおりです: /page/detail/IUKGEQ/108/9933/32279/8
  	toUrl = to.path; とします。
                                                                       
    //このルート要求は next() で解放されます。

});

2. クライアントを決定する

navigator.userAgent : ブラウザがHTTPリクエストに使用するユーザーエージェントヘッダーの値を取得します。

 if (typeof window !== 'undefined' && typeof window.navigator !== 'undefined') {
            if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
            	//モバイル側でビジネスロジックを処理する}else{
				//コンピュータ側でビジネスロジックを処理する}
   }

3. 正規表現(JS)

文法

/正規表現本体/修飾子(オプション)

修飾子

表現説明する
大文字と小文字を区別しない一致を実行します。
グローバル マッチを実行します (最初の一致の後に停止するのではなく、すべての一致を検索します)。
メートル複数行の一致を実行します。

検索()

search() メソッドは、文字列内の指定された部分文字列を検索したり、正規表現に一致する部分文字列を検索して、その部分文字列の開始位置を返すために使用されます。そうでない場合は**-1**を返します。

// 大文字と小文字を区別しません var index = 'Hello World!'.search(/world/i);

交換する()

replace() メソッドは、文字列内の一部の文字を他の文字に置き換えたり、正規表現に一致する部分文字列を置き換えたりするために使用されます。

var txt = 'Microsoft'.replace("Microsoft","World");

テスト()

test() メソッドは、文字列がパターンに一致するかどうかを確認するために使用されます。文字列に一致するテキストが含まれている場合は true を返し、そうでない場合は false を返します。

var flag = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent);

実行()

exec()メソッドは、文字列内の正規表現の一致を取得するために使用されます。

この関数は、一致する結果を含む配列を返します。一致するものが見つからない場合、戻り値は null になります。

var matchParams = /(\d{1,3})\/(\d{4,6})\/(\d{4,6})/.exec('/page/detail/IUKGEQ/108/9933/32279/8')

正規構文リファレンス: https://www.runoob.com/regexp/regexp-syntax.html

4. ソースコード:

エクスポートデフォルト({アプリ})=> {
    app.router.beforeEach((to, from, next) => {
        if (typeof window !== 'undefined' && typeof window.navigator !== 'undefined') {
            if(!/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
                // コンピューターからアクセスした場合、 next() は直接解放されます。
            }それ以外{

                var sCode = '';
                toUrl = to.path; とします。
                //識別子取得方法1: リクエストリンクから取得 //例: /page/detail/IUKGEQ/108/9933/32279/8
                //例: /IUKGEQ
                //接続内の大文字6文字を抽出する正規表現 let matchArr = toUrl.match('\/([AZ]{6})');
                if((sCode=='' || sCode == null || sCode == undefined) && matchArr != null){
                    sCode = matchArr[1];
                }
    
                //識別情報取得方法2: コードを取得するためのリクエストを開始する 
                //例: /swpu
                matchArr2 = toUrl.match('\/([az]{3,})'); とします。
                if((sCode=='' || sCode == null || sCode == undefined) && matchArr2 != null){
                    var パラメータ = matchArr2[1];
                    getSInfo2(パラメータ)
                    .then(res => {
                      (res.data.code)の場合{
                        sCode = res.data.code;
                        //ルートジャンプ mobileRouteCombine(toUrl,sCode);
                      } それ以外 {
                        // コードが見つかりません
                        next();//リリース}
                    })
                    .catch(エラー => {
                        next(); //リリース });
                }
                //上記の 2 つの方法でコードを取得できない場合は、コードを解放するだけです if(sCode=='' || sCode == null || sCode == undefined){
                    次();
                    戻る;
                }それ以外{
                    //ルートジャンプ mobileRouteCombine(toUrl,sCode);
                }
            }
        }
        次();
    })
}

/**
 * モバイルルーティングの再編成* @param {訪問先のURLアドレス} toUrl 
 * @param [コード] sコード 
 */
関数 mobileRouteCombine(toUrl,sCode){
    var wxHomeUrl = conf.weixin + '/build/index.html?scode=' + sCode + '#/';
                
    // toUrlが/IUKGEQの形式の場合、WeChatホームページに直接ジャンプします。if(toUrl.length <= 7){
        場所.href = wxHomeUrl;
    }

    //記事リストif(toUrl.indexOf('/page/list/') != -1){
        matchParams = toUrl.match('(\\d{1,3})\/(\\d{4,6})'); とします。 
        catIdをmatchParams[2]とします。
        let versionId = matchParams[1]; //バージョンID
        var url = wxHomeUrl + 'articleList?catId=' + catId;
        location.href = URL;     
    }

    //記事の詳細if(toUrl.indexOf('/page/detail/') != -1){
        matchParams = toUrl.match('(\\d{1,3})\/(\\d{4,6})\/(\\d{4,6})'); とします。 
        infoIdをmatchParams[3]とします。
        catIdをmatchParams[2]とします。
        let versionId = matchParams[1]; //バージョンID
        var url = wxHomeUrl + 'articleDetail?infoId=' + infoId + '&catId=' + catId;
        location.href = URL;     
    }
}

これで、vue で PC アドレスをモバイル端末にリダイレクトする方法についての説明は終わりです。vue アドレス リダイレクトに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue-Element-Adminはログインジャンプを実現するために独自のインターフェースを統合しています
  • Vueプロジェクトでパラメータジャンプ機能を実装する
  • Vueのハッシュジャンプ原理の詳細な説明
  • Vueページジャンプの実装方法
  • Vueはログイン、登録、終了、ジャンプなどの機能を実装します
  • Vue のルーティングは履歴操作にカウントされません

<<:  CSSプロパティに基づいたボタンホバーボーダーと背景アニメーションのコレクション

>>:  経験者のHTMLの書き方と理由の分析

推薦する

メタタグコードを使用して、360 デュアルコアブラウザを互換モードではなく高速モードにデフォルト設定します。

あるウェブサイトでは、ユーザーが WebKit カーネルでページを開くことを期待して、HTML5 と...

Vue命令の動作原理と実装方法

Vue の紹介現在のビッグフロントエンドの時代は、混乱と衝突の時代です。世界は多くの派閥に分かれてお...

Vue でよく使われる命令 v-if と v-show の違いを簡単に分析します。

目次序文1.v-ショー2.v-if 3. v-showとv-ifの違い1. 原則の違い2. アプリケ...

scss で mixin が動作しない問題の解決方法 (ブラウザでコンパイルできない)

ミックスインメソッド: ブラウザはコンパイルできません: 以前のバージョンのsassでは上記の記述方...

HTML ハイパーリンク スタイル (4 つの異なる状態) の設定例

コードをコピーコードは次のとおりです。 <スタイル タイプ="text/css&qu...

JS でクリップボード API を使用する方法

目次1. Document.execCommand() メソッド(1)コピー操作(2)貼り付け操作(...

MySQL MHA 操作ステータス監視の概要

目次1. プロジェクトの説明1.1 背景1.2 実装設計1.2.1 従来の方法1.2.2 最適化され...

Mysql 複数データベースのバックアップ コード例

この記事は主にMysqlの複数データベースのバックアップのコード例を紹介します。この記事ではサンプル...

ubuntu20.04 上の CLion2020.1.3 での ROS のインストールと設定の詳細な説明

1. CLionをダウンロード、インストール、アクティベートするオンラインで提供されるチュートリアル...

mysql binlog ログを正しくクリーンアップする 2 つの方法

mysqlはbinlogログを正しくクリーンアップします序文: MySQL の binlog はデー...

Vueはランニングライトのシンプルな効果を実現

この記事では、マーキーのシンプルな効果を実現するためのVueの具体的なコードを参考までに共有します。...

Access_Tokenの統合管理を実現するミニプログラム開発

目次TOKEN タイマーリフレッシュ2. access_tokenの内部設計2.1 access_t...

dockerでnginxを実行するときにdaemon offが使用される理由についての簡単な説明

とても嬉しいです。この問題に遭遇したとき、私はDockerコンテナのプロセス原理について話さなければ...

Vue elementUI フォームのネストされたテーブルと各行の検証の詳細な説明

目次エフェクト表示コードリンクキーコード表形式データコンポーネントのネスト検証方法リセット方法完全な...

XHTML 2.0 新機能プレビュー

<br />ブラウザが次世代のXHTMLを処理できるようになる前に、このよりリッチなコン...