vue中手机端和电脑端之间路由切换的实现代码,正则表达式对路由替换
例如有手机端登录页面和电脑端的登录页面登录的路由分别是/pc/login/phone/login实现代码:先根据浏览器判断是电脑还是手机端的界面然后通过正则截取/login进行字符串拼接,形成新的路由在入口App.vue中的script中添加export default {name: 'App',methods: {// 判断phone端还是pc端_isMobile() {
·
例如有手机端登录页面和电脑端的登录页面
登录的路由分别是
/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 () {
let pathstr = this.$route.path;
if (this._isMobile()) {
//是手机端,需要将页面切换成手机端路由
let regex = /\/pc\/(\S*)/;
//测试是否匹配,进入则说明路由切换到电脑端
if (regex.test(pathstr)) {
let temp = pathstr.match(regex);
if (temp != null) {
pathstr = "/phone/" + temp[1]
}
// 切换到手机端路由
this.$router.replace(pathstr);
}
} else {
//是pc端,需要将页面切换到pc端路由
let regex = /\/phone\/(\S*)/;
//测试是否匹配,进入则说明路由切换到手机端
if (regex.test(pathstr)) {
let temp = pathstr.match(regex);
if (temp != null) {
pathstr = "/pc/" + temp[1]
}
// 切换到pc端路由
this.$router.replace(pathstr);
}
}
},
}
更多推荐
已为社区贡献39条内容
所有评论(0)