vue中PC端地址跳轉(zhuǎn)移動端的操作方法

更新時間：2021年11月03日 14:34:23 作者：Courage-He

最近小編接到一個項目pc端和移動端是兩個獨立的項目，兩個項目項目中的內(nèi)容基本相同，鏈接組合的方式都有規(guī)律可循，接到的需求便是在移動端訪問pc端的URL連接時，重定向至移動端對應頁面，下面小編給大家分享實現(xiàn)過程，一起看看吧

需求：pc端和移動端是兩個獨立的項目，兩個項目項目中的內(nèi)容基本相同，鏈接組合的方式都有規(guī)律可循，接到的需求便是在移動端訪問pc端的URL連接時，重定向至移動端對應頁面。

這個需求實現(xiàn)的方式比較明了，我的大致思路是在路由守衛(wèi)處監(jiān)聽每個進來的路由請求，分析該請求是否是由移動端訪問，若不是，則該路由請求直接放行；若是則分析要進入的路由路徑，提取路徑中的必要字段，組合稱新的移動端鏈接即可。

里面涉及到了三個知識點：1、路由守衛(wèi)，2、客戶端判斷、3、正則提取文字，接下來就分別按照這幾點講解一下，并附上整個開發(fā)過程的源碼，供大家參考學習或批評指正。

1、路由守衛(wèi)

to：要進入的路由
from：從哪個路由訪問
next：路由控制參數(shù)，常用next(true),和next(false)

//所有的路由請求都會經(jīng)過該路由守衛(wèi)，
router.beforeEach((to, from, next) => {
	
    //訪問鏈接如：http://localhost/page/detail/IUKGEQ/108/9933/32279/8
    //訪問路徑為：/page/detail/IUKGEQ/108/9933/32279/8
  	let 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)) {
            	//處理移動端的業(yè)務邏輯
            }else{
				//處理電腦端的業(yè)務邏輯
            }
   }

3、正則表達式（JS）

語法

/正則表達式主體/修飾符(可選)

修飾符

表達式	描述
i	執(zhí)行對大小寫不敏感的匹配。
g	執(zhí)行全局匹配（查找所有匹配而非在找到第一個匹配后停止）。
m	執(zhí)行多行匹配。

search()

search() 方法 用于檢索字符串中指定的子字符串，或檢索與正則表達式相匹配的子字符串，并返回子串的起始位置。若無則返回**-1**。

// 不區(qū)分大小寫                  
var index = 'Hello World!'.search(/world/i);

replace()

replace() 方法 用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串。

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

test()

test() 方法用于檢測一個字符串是否匹配某個模式，如果字符串中含有匹配的文本，則返回 true，否則返回 false

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

exec()

exec() 方法用于檢索字符串中的正則表達式的匹配。

該函數(shù)返回一個數(shù)組，其中存放匹配的結果。如果未找到匹配，則返回值為 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、源碼：

export default ({ app }) => {
    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();
            }else{

                var sCode = '';
                let toUrl = to.path;
                //標識獲取方式1：從請求鏈接中獲取
                //如：/page/detail/IUKGEQ/108/9933/32279/8
                //如：/IUKGEQ
                //正則表達式提取連接中的 六位大寫字母的標識
                let matchArr = toUrl.match('\/([A-Z]{6})');
                if((sCode=='' || sCode == null || sCode == undefined) && matchArr != null){
                    sCode = matchArr[1];
                }
    
                //標識獲取方式2：發(fā)起請求獲取Code 
                //如：/swpu
                let matchArr2 = toUrl.match('\/([a-z]{3,})');
                if((sCode=='' || sCode == null || sCode == undefined) && matchArr2 != null){
                    var param = matchArr2[1];
                    getSInfo2(param)
                    .then(res => {
                      if (res.data.code) {
                        sCode = res.data.code;
                        //路由跳轉(zhuǎn)
                        mobileRouteCombine(toUrl,sCode);
                      } else {
                        // 查不到code
                        next();//放行
                      }
                    })
                    .catch(err => {
                        next();//放行
                    });
                }
                //上面兩種種方式如果都無法取出code，則直接放行
                if(sCode=='' || sCode == null || sCode == undefined){
                    next();
                    return;
                }else{
                    //路由跳轉(zhuǎn)
                    mobileRouteCombine(toUrl,sCode);
                }
            }
        }
        next();
    })
}

/**
 * 移動端路由重組
 * @param {訪問的url地址} toUrl 
 * @param [code] sCode 
 */
function mobileRouteCombine(toUrl,sCode){
    var wxHomeUrl = conf.weixin + '/build/index.html?scode=' + sCode + '#/';
                
    // toUrl為 如 /IUKGEQ 形式，則直接跳轉(zhuǎn)微信首頁
    if(toUrl.length <= 7){
        location.href = wxHomeUrl;
    }

    //文章列表
    if(toUrl.indexOf('/page/list/') != -1){
        let matchParams = toUrl.match('(\\d{1,3})\/(\\d{4,6})'); 
        let catId = matchParams[2];
        let versionId = matchParams[1];//版本id
        var url = wxHomeUrl +'articleList?catId=' + catId;
        location.href = url;     
    }

    //文章詳情
    if(toUrl.indexOf('/page/detail/') != -1){
        let matchParams = toUrl.match('(\\d{1,3})\/(\\d{4,6})\/(\\d{4,6})'); 
        let infoId = matchParams[3];
        let catId = matchParams[2];
        let versionId = matchParams[1];//版本id
        var url = wxHomeUrl +'articleDetail?infoId=' + infoId + '&catId=' + catId;
        location.href = url;     
    }
}

到此這篇關于vue中PC端地址跳轉(zhuǎn)移動端的文章就介紹到這了,更多相關vue地址跳轉(zhuǎn)移內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vue.js實現(xiàn)圖片壓縮封裝方法
這篇文章主要介紹了vue.js實現(xiàn)圖片壓縮封裝方法,包括全局main.js引入方法，通過引入imgupload方法結合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下
2022-05-05
在vue中實現(xiàn)清除echarts上次保留的數(shù)據(jù)(親測有效)
這篇文章主要介紹了在vue中實現(xiàn)清除echarts上次保留的數(shù)據(jù)(親測有效)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
vue導出報表至excel表格三種方式
這篇文章主要給大家介紹了關于vue導出報表至excel表格的三種方式,導出報表是實際開發(fā)的常見功能,前后端都可以實現(xiàn)表格導出,本文介紹的是用vue實現(xiàn),需要的朋友可以參考下
2023-09-09
vue.config.js中的devServer使用
這篇文章主要介紹了vue.config.js中的devServer使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue中form表單禁用專用組件介紹
這篇文章主要介紹了vue中form表單禁用專用組件,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-01-01
Vue3+vite實現(xiàn)使用svg可改變顏色的全過程
Vue3 + Vite 使用 SVG 的方法主要是為了引入和利用圖標庫、自定義組件以及通過插件簡化項目構建過程,這篇文章給大家介紹了Vue3+vite實現(xiàn)使用svg可改變顏色的全過程,需要的朋友可以參考下
2024-07-07
vue-cli3.0修改打包后的文件名和文件地址,打包后本地運行報錯解決
這篇文章主要介紹了vue-cli3.0修改打包后的文件名和文件地址,打包后本地運行報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue3 vue-draggable-next如何實現(xiàn)拖拽穿梭框效果
這篇文章主要介紹了vue3 vue-draggable-next如何實現(xiàn)拖拽穿梭框效果,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-06-06
Vue項目如何在js文件里獲取路由參數(shù)及路由跳轉(zhuǎn)
日常業(yè)務中路由跳轉(zhuǎn)的同時傳遞參數(shù)是比較常見的,下面這篇文章主要給大家介紹了關于Vue項目如何在js文件里獲取路由參數(shù)及路由跳轉(zhuǎn)的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-01-01
深入淺析Vue.js計算屬性和偵聽器
這篇文章主要介紹了Vue.js計算屬性和偵聽器的相關資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
2018-05-05