脚本宝典收集整理的这篇文章主要介绍了vue-router 中导航守卫问题，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

导航守卫

一开始我以为导航守卫是要在写在main.js中，然后看了网上很多代码，发现这块是可以单独写成一个xxx.js文件，然后在main.js中引入进来,这样就是一个全局引入。当然在xxx.js中，需要将路由文件引入进来，不然你怎么操作路由呐。【思考脸】

然后对于next()的理解不是很透彻。

查看官网，你会发现其实人家解释的很清楚。next() 会进行管道中的下一个钩子，这句话其实不是太过于明白，但是通过实例，可以暂时自理解为当你的导航变化时，满足你自己编写的条件时，就会进入它的下一个钩子函数中。

但当时的写的代码是这样的

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

当时我的想法以为是，只要路由发生了变化，我在这边就需要进行判断来监听一下。后来想想这样是有问题的呀，假如我配置的路由有很多path,难道我还要一个一个去比较啊，所以上面的方法肯定是行不通的。所以我后期只判断了一个地址。

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()就可以完成跳转了不用每次路由变化就去判断

这是以前提的一个问题

脚本宝典总结

以上是脚本宝典为你收集整理的vue-router 中导航守卫问题全部内容，希望文章能够帮你解决vue-router 中导航守卫问题所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。