vue中PC端地址跳轉(zhuǎn)移動端的操作方法
需求:pc端和移動端是兩個(gè)獨(dú)立的項(xiàng)目,兩個(gè)項(xiàng)目項(xiàng)目中的內(nèi)容基本相同,鏈接組合的方式都有規(guī)律可循,接到的需求便是在移動端訪問pc端的URL連接時(shí),重定向至移動端對應(yīng)頁面。
這個(gè)需求實(shí)現(xiàn)的方式比較明了,我的大致思路是在路由守衛(wèi)處監(jiān)聽每個(gè)進(jìn)來的路由請求,分析該請求是否是由移動端訪問,若不是,則該路由請求直接放行;若是則分析要進(jìn)入的路由路徑,提取路徑中的必要字段,組合稱新的移動端鏈接即可。
里面涉及到了三個(gè)知識點(diǎn):1、路由守衛(wèi),2、客戶端判斷、3、正則提取文字,接下來就分別按照這幾點(diǎn)講解一下,并附上整個(gè)開發(fā)過程的源碼,供大家參考學(xué)習(xí)或批評指正。
1、路由守衛(wèi)
- to:要進(jìn)入的路由
- from:從哪個(gè)路由訪問
- 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è)務(wù)邏輯 }else{ //處理電腦端的業(yè)務(wù)邏輯 } }
3、正則表達(dá)式(JS)
語法
/正則表達(dá)式主體/修飾符(可選)
修飾符
表達(dá)式 | 描述 |
---|---|
i | 執(zhí)行對大小寫不敏感的匹配。 |
g | 執(zhí)行全局匹配(查找所有匹配而非在找到第一個(gè)匹配后停止)。 |
m | 執(zhí)行多行匹配。 |
search()
search() 方法 用于檢索字符串中指定的子字符串,或檢索與正則表達(dá)式相匹配的子字符串,并返回子串的起始位置。若無則返回**-1**。
// 不區(qū)分大小寫 var index = 'Hello World!'.search(/world/i);
replace()
replace() 方法 用于在字符串中用一些字符替換另一些字符,或替換一個(gè)與正則表達(dá)式匹配的子串。
var txt = 'Microsoft'.replace("Microsoft","World");
test()
test() 方法用于檢測一個(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')
正則語法參考: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; //標(biāo)識獲取方式1:從請求鏈接中獲取 //如:/page/detail/IUKGEQ/108/9933/32279/8 //如:/IUKGEQ //正則表達(dá)式提取連接中的 六位大寫字母的標(biāo)識 let matchArr = toUrl.match('\/([A-Z]{6})'); if((sCode=='' || sCode == null || sCode == undefined) && matchArr != null){ sCode = matchArr[1]; } //標(biāo)識獲取方式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; } }
到此這篇關(guān)于vue中PC端地址跳轉(zhuǎn)移動端的文章就介紹到這了,更多相關(guān)vue地址跳轉(zhuǎn)移內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue+element項(xiàng)目中過濾輸入框特殊字符小結(jié)
這篇文章主要介紹了vue+element項(xiàng)目中過濾輸入框特殊字符小結(jié),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08Vue中ElementUI結(jié)合transform使用時(shí)彈框定位不準(zhǔn)確問題解析
在近期開發(fā)中,需要將1920*1080放到更大像素大屏上演示,所以需要使用到transform來對頁面進(jìn)行縮放,但是此時(shí)發(fā)現(xiàn)彈框定位出錯(cuò)問題,無法準(zhǔn)備定位到實(shí)際位置,本文給大家分享Vue中ElementUI結(jié)合transform使用時(shí)彈框定位不準(zhǔn)確解決方法,感興趣的朋友一起看看吧2024-01-01vue中路由跳轉(zhuǎn)不計(jì)入history的操作
這篇文章主要介紹了vue中路由跳轉(zhuǎn)不計(jì)入history的操作,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09vue?openlayers實(shí)現(xiàn)臺風(fēng)軌跡示例詳解
這篇文章主要為大家介紹了vue?openlayers實(shí)現(xiàn)臺風(fēng)軌跡示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11Vue3封裝ElImageViewer預(yù)覽圖片的示例代碼
本文主要介紹了Vue3封裝ElImageViewer預(yù)覽圖片的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07vue-cli3環(huán)境變量與分環(huán)境打包的方法示例
這篇文章主要介紹了vue-cli3環(huán)境變量與分環(huán)境打包的方法示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02