欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2021年11月03日 14:34:23   作者：Courage-He  
最近小編接到一個(gè)項(xiàng)目pc端和移動(dòng)端是兩個(gè)獨(dú)立的項(xiàng)目，兩個(gè)項(xiàng)目項(xiàng)目中的內(nèi)容基本相同，鏈接組合的方式都有規(guī)律可循，接到的需求便是在移動(dòng)端訪問(wèn)pc端的URL連接時(shí)，重定向至移動(dòng)端對(duì)應(yīng)頁(yè)面，下面小編給大家分享實(shí)現(xiàn)過(guò)程，一起看看吧

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

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

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

1、路由守衛(wèi)

  • to：要進(jìn)入的路由
  • from：從哪個(gè)路由訪問(wèn)
  • next：路由控制參數(shù)，常用next(true),和next(false)
//所有的路由請(qǐng)求都會(huì)經(jīng)過(guò)該路由守衛(wèi)，
router.beforeEach((to, from, next) => {
	
    //訪問(wèn)鏈接如：http://localhost/page/detail/IUKGEQ/108/9933/32279/8
    //訪問(wèn)路徑為：/page/detail/IUKGEQ/108/9933/32279/8
  	let toUrl = to.path;
                                                                       
    //該路由請(qǐng)求放行
    next();

});

2、判斷客戶(hù)端

navigator.userAgent：可獲取瀏覽器用于HTTP請(qǐng)求的用戶(hù)代理頭的值

 if (typeof window !== 'undefined' && typeof window.navigator !== 'undefined') {
            if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
            	//處理移動(dòng)端的業(yè)務(wù)邏輯
            }else{
				//處理電腦端的業(yè)務(wù)邏輯
            }
   }

3、正則表達(dá)式（JS）

語(yǔ)法

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

修飾符

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

search()

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

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

replace()

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

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

test()

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

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

exec()

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

該函數(shù)返回一個(gè)數(shù)組，其中存放匹配的結(jié)果。如果未找到匹配，則返回值為 null。

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

正則語(yǔ)法參考：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)) {
                //電腦端訪問(wèn)，則直接放行
                next();
            }else{

                var sCode = '';
                let toUrl = to.path;
                //標(biāo)識(shí)獲取方式1：從請(qǐng)求鏈接中獲取
                //如：/page/detail/IUKGEQ/108/9933/32279/8
                //如：/IUKGEQ
                //正則表達(dá)式提取連接中的 六位大寫(xiě)字母的標(biāo)識(shí)
                let matchArr = toUrl.match('\/([A-Z]{6})');
                if((sCode=='' || sCode == null || sCode == undefined) && matchArr != null){
                    sCode = matchArr[1];
                }
    
                //標(biāo)識(shí)獲取方式2：發(fā)起請(qǐng)求獲取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();//放行
                    });
                }
                //上面兩種種方式如果都無(wú)法取出code，則直接放行
                if(sCode=='' || sCode == null || sCode == undefined){
                    next();
                    return;
                }else{
                    //路由跳轉(zhuǎn)
                    mobileRouteCombine(toUrl,sCode);
                }
            }
        }
        next();
    })
}

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

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

相關(guān)文章

  • vue+element項(xiàng)目中過(guò)濾輸入框特殊字符小結(jié)

    vue+element項(xiàng)目中過(guò)濾輸入框特殊字符小結(jié)

    這篇文章主要介紹了vue+element項(xiàng)目中過(guò)濾輸入框特殊字符小結(jié)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-08-08
  • Vue中ElementUI結(jié)合transform使用時(shí)彈框定位不準(zhǔn)確問(wèn)題解析

    Vue中ElementUI結(jié)合transform使用時(shí)彈框定位不準(zhǔn)確問(wèn)題解析

    在近期開(kāi)發(fā)中,需要將1920*1080放到更大像素大屏上演示,所以需要使用到transform來(lái)對(duì)頁(yè)面進(jìn)行縮放,但是此時(shí)發(fā)現(xiàn)彈框定位出錯(cuò)問(wèn)題,無(wú)法準(zhǔn)備定位到實(shí)際位置,本文給大家分享Vue中ElementUI結(jié)合transform使用時(shí)彈框定位不準(zhǔn)確解決方法,感興趣的朋友一起看看吧
    2024-01-01
  • vue中路由跳轉(zhuǎn)不計(jì)入history的操作

    vue中路由跳轉(zhuǎn)不計(jì)入history的操作

    這篇文章主要介紹了vue中路由跳轉(zhuǎn)不計(jì)入history的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-09-09
  • vue.js—定義全局變量、函數(shù)的方式

    vue.js—定義全局變量、函數(shù)的方式

    這篇文章主要介紹了vue.js—定義全局變量、函數(shù)的方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • vue?openlayers實(shí)現(xiàn)臺(tái)風(fēng)軌跡示例詳解

    vue?openlayers實(shí)現(xiàn)臺(tái)風(fēng)軌跡示例詳解

    這篇文章主要為大家介紹了vue?openlayers實(shí)現(xiàn)臺(tái)風(fēng)軌跡示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-11-11
  • Vue3封裝ElImageViewer預(yù)覽圖片的示例代碼

    Vue3封裝ElImageViewer預(yù)覽圖片的示例代碼

    本文主要介紹了Vue3封裝ElImageViewer預(yù)覽圖片的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2023-07-07
  • Vue采用異步渲染的原理分析

    Vue采用異步渲染的原理分析

    對(duì)于Vue為何采用異步渲染，簡(jiǎn)單來(lái)說(shuō)就是為了提升性能，因?yàn)椴徊捎卯惒礁?，在每次更新?shù)據(jù)都會(huì)對(duì)當(dāng)前組件進(jìn)行重新渲染，為了性能考慮，Vue會(huì)在本輪數(shù)據(jù)更新后，再去異步更新視圖，本文主要通過(guò)幾個(gè)實(shí)例給大家介紹一下Vue為何采用異步渲染,需要的朋友可以參考下
    2023-06-06
  • 在Vue2中注冊(cè)全局組件的兩種方法詳解

    在Vue2中注冊(cè)全局組件的兩種方法詳解

    這篇文章主要介紹了在Vue2中注冊(cè)全局組件的兩種方法,非常的細(xì)致,需要的朋友可以參考下
    2022-07-07
  • vue-cli3環(huán)境變量與分環(huán)境打包的方法示例

    vue-cli3環(huán)境變量與分環(huán)境打包的方法示例

    這篇文章主要介紹了vue-cli3環(huán)境變量與分環(huán)境打包的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2019-02-02
  • vue中如何去掉空格的方法實(shí)現(xiàn)

    vue中如何去掉空格的方法實(shí)現(xiàn)

    這篇文章主要介紹了vue中如何去掉空格的方法實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-11-11

最新評(píng)論