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 () {

            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);
                }
            }
        },
    }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章