vue中手机端和电脑端之间路由切换的实现代码,正则表达式对路由替换

例如有手机端登录页面和电脑端的登录页面
登录的路由分别是

/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);
                }
            }

        },
    }

你可能感兴趣的:(云博前端,#,Vue学习笔记)