vue中PC端地址跳轉(zhuǎn)移動端的操作方法
更新時間：2021年11月03日 14:34:23 作者：Courage-He
最近小編接到一個項目pc端和移動端是兩個獨立的項目，兩個項目項目中的內(nèi)容基本相同，鏈接組合的方式都有規(guī)律可循，接到的需求便是在移動端訪問pc端的URL連接時，重定向至移動端對應(yīng)頁面，下面小編給大家分享實現(xiàn)過程，一起看看吧
需求：pc端和移動端是兩個獨立的項目，兩個項目項目中的內(nèi)容基本相同，鏈接組合的方式都有規(guī)律可循，接到的需求便是在移動端訪問pc端的URL連接時，重定向至移動端對應(yīng)頁面。
這個需求實現(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è)務(wù)邏輯
}else{
//處理電腦端的業(yè)務(wù)邏輯
}
}
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ù)組，其中存放匹配的結(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;
//標識獲取方式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;
}
}
到此這篇關(guān)于vue中PC端地址跳轉(zhuǎn)移動端的文章就介紹到這了,更多相關(guān)vue地址跳轉(zhuǎn)移內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue+element項目中過濾輸入框特殊字符小結(jié)
這篇文章主要介紹了vue+element項目中過濾輸入框特殊字符小結(jié)，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
Vue中ElementUI結(jié)合transform使用時彈框定位不準確問題解析
在近期開發(fā)中,需要將1920*1080放到更大像素大屏上演示,所以需要使用到transform來對頁面進行縮放,但是此時發(fā)現(xiàn)彈框定位出錯問題,無法準備定位到實際位置,本文給大家分享Vue中ElementUI結(jié)合transform使用時彈框定位不準確解決方法,感興趣的朋友一起看看吧2024-01-01
這篇文章主要介紹了vue中路由跳轉(zhuǎn)不計入history的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了vue.js—定義全局變量、函數(shù)的方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue?openlayers實現(xiàn)臺風軌跡示例詳解
這篇文章主要為大家介紹了vue?openlayers實現(xiàn)臺風軌跡示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
Vue3封裝ElImageViewer預(yù)覽圖片的示例代碼
本文主要介紹了Vue3封裝ElImageViewer預(yù)覽圖片的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
對于Vue為何采用異步渲染，簡單來說就是為了提升性能，因為不采用異步更新，在每次更新數(shù)據(jù)都會對當前組件進行重新渲染，為了性能考慮，Vue會在本輪數(shù)據(jù)更新后，再去異步更新視圖，本文主要通過幾個實例給大家介紹一下Vue為何采用異步渲染,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了在Vue2中注冊全局組件的兩種方法,非常的細致,需要的朋友可以參考下2022-07-07
vue-cli3環(huán)境變量與分環(huán)境打包的方法示例
這篇文章主要介紹了vue-cli3環(huán)境變量與分環(huán)境打包的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要介紹了vue中如何去掉空格的方法實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11