1. ルーティングガード
//すべてのルーティング要求はルーティングガードを通過します。 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: CSSプロパティに基づいたボタンホバーボーダーと背景アニメーションのコレクション
目次1. キューを理解する2. カプセル化キュー3. 太鼓をたたいて花を渡す場合1. キューを理解す...
フロントエンド開発でよく使われるCSSの配置方法は、位置決めには、通常位置決め、相対位置決め、絶対位...
目次前提条件RNはiOSに価値を渡す方法1: ネイティブに値を通常通り渡す方法2: コールバック関数...
リストは、類似または関連する一連の項目をリストするために使用されます。順序なしリスト(箇条書きリスト...
Optgroup は、ドロップダウン リストのコンテンツをより整理するために、select タグで使...
による写真に示されている効果を例に挙げてみましょう。明らかに、「次へ」というテキストを水平方向だけで...
序文私のチームが税制モジュールを開発していたとき、計算問題、特にグリッド内の計算を解決するために時間...
最新の Windows 10 アップデートをインストールした後、システム UI の詳細な効果が顕著に...
MySQL公式サイト: https://www.mysql.com/downloads/ http...
問題の説明プロジェクトに取り組んでいるときに、タブ バーの切り替え効果を作成する必要がある場合があり...
目次1 違い1.1 スペース占有1.2 表現範囲1.3 タイムゾーン2 テスト3つの選択肢MySQL...
vuexとはvuex: vue.js専用に開発された状態管理ツールで、すべてのコンポーネントの状態を...
障害サイト: MySQL サーバーにログインし、どのコマンドを実行してもこのエラーが発生します my...
目次序文MySQL の NULL 2 NULL占有長3 NULL値の比較4SQLはNULL値を処理す...
序文tcpdump はよく知られたコマンドライン パケット分析ツールです。 tcpdump コマンド...