vue-router 中導航守衛問題

導航守衛

一開始我覺得導航守衛是要在寫在main.js中,而後看了網上不少代碼,發現這塊是能夠單獨寫成一個xxx.js文件,而後在main.js中引入進來,這樣就是一個全局引入。固然在xxx.js中,須要將路由文件引入進來,否則你怎麼操做路由吶。【思考臉】shell

而後對於next()的理解不是很透徹。segmentfault

查看官網,你會發現其實人家解釋的很清楚。next() 會進行管道中的下一個鉤子,這句話其實不是太過於明白,可是經過實例,能夠暫時自理解爲當你的導航變化時,知足你本身編寫的條件時,就會進入它的下一個鉤子函數中。函數

但當時的寫的代碼是這樣的spa

if (to.path == '/' || to.path == '/upload-version') {
        next()
    } else {
        if (to.path == '/remote-shell') {
            next()
        } else {
            next()
        }
    }

當時個人想法覺得是,只要路由發生了變化,我在這邊就須要進行判斷來監聽一下。後來想一想這樣是有問題的呀,假如我配置的路由有不少path,難道我還要一個一個去比較啊,因此上面的方法確定是行不通的。因此我後期只判斷了一個地址。code

router.beforeEach((to, from, next) => {
//首先判斷是否有值
if (getPort() && getAddress()) {
    //有 直接給stroe賦值
    var ipp = { port: getPort(), address: getAddress() }
    console.log(ipp);
    //若是getters中沒有值就賦值
    console.log(store.getters.gethip);
        if (store.getters.geti == '') {
            console.log("有沒有有沒有沒有")
            store.dispatch('choicePort', ipp).then(() => {
                console.log(store.getters);
            }).catch(() => { })
            store.dispatch("registerMessageListener").then().catch()
            next()
        }else{
            next();
        }
} else {
    //沒有 跳轉到選擇頁面中去,配置地址
  if ((to.path) == '/xxxx') {
        next()
    } else {
        next('/xxx');
    }
}

直接經過next()就能夠完成跳轉了不用每次路由變化就去判斷router


這是之前提的一個問題ip

相關文章
相關標籤/搜索