例如有手機端登錄頁面和電腦端的登錄頁面
登錄的路由分別是
/pc/login
/phone/login
實現代碼:先根據瀏覽器判斷是電腦還是手機端的界面
然後通過正則截取/login進行字符串拼接,形成新的路由
在入口App.vue中的script中添加
export default {
name: 'App',
methods: {
// 判斷phone端還是pc端
_isMobile() {
let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
return flag;
}
},
mounted: function () {
if (this._isMobile()) {
//是手機端,需要將頁面切換成手機端路由
let pathstr = this.$route.path;
let regex = /pc(\S*)/;
//測試是否匹配,進入則說明路由切換到電腦端
if (regex.test(pathstr)) {
let temp = pathstr.match(regex);
console.log(temp)
if (temp != null) {
pathstr = "/phone" + temp[1]
}
// 切換到手機端路由
this.$router.replace(pathstr);
}
} else {
//是pc端,需要將頁面切換到pc端路由
let pathstr = this.$route.path;
console.log(pathstr);
let regex = /phone(\S*)/;
//測試是否匹配,進入則說明路由切換到手機端
if (regex.test(pathstr)) {
let temp = pathstr.match(regex);
console.log(temp)
if (temp != null) {
pathstr = "/pc" + temp[1]
}
// 切換到pc端路由
this.$router.replace(pathstr);
}
}
},
}