脚本宝典收集整理的这篇文章主要介绍了vue-router导航守卫理解，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
1. vue-router的导航守卫，简单来说就是在一个路由地址跳转到另一个路由地址的过程中，会触发的一些钩子函数，类似于Vue生命周期钩子函数，页面加载执行到某个阶段，就会去执行某个导航守卫.
2. 如果说个人的理解不太清晰的话，可以参考官方文档：https://router.vuejs.org/zh/guide/advanced/navigation-Guards.htML#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB
3. 首先在详细介绍路由导航守卫之前，记录一下自己遇到的bug，
第一个：是网上的一个错误博客，博客内容是说如果在导航守卫中使用 return ; 那么return语句后的代码仍然可以被执行，
然而个人在尝试之后发现，如果使用return；那么导航守卫将立即跳出原函数，不再执行后面代码块.
beforeRouteEnter(to, From, next) { console.LOG('component---beforeRouteEnter'); // return ; console.log('hello') // 在调用return后，将不再输出hello，并且页面内容也不会被显示 next(); },
第二个：如下代码段，使用前置导航守卫next函数时，
next({path: '/home'})
会报错：Maximum call stack size exceeded next path.栈溢出错误，
具体过程为：当我们访问 /home 时，触发前置导航守卫，使页面跳转到 /home，而跳转到 /home 后，再次触发前置导航守卫，页面重复
跳转到 /home, 进入死循环，堆栈溢出.
解决方法师添加条件判断语句：
router.beforeeach((to, from, next) => { console.log("router---beforeEach"); if (to.path === '/home') { next(); } else { next({path: '/home'}); } });
4. vue-router导航守卫详解：
【1】beforeEach：这个导航守卫是全局前置导航守卫，每次路由跳转到某个网址，都会触发这个导航守卫.
const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { console.log('router---beforeEach');// ... })
【2】beforeEnter：这个导航守卫是路由独享的前置导航守卫，也就是说，你给哪个路由组件配置了此导航守卫，在跳转到此路由地址时，才会触发beforeEnter，其他路由地址不会触发.
{ path: '/home/:id', meta: { tITle: '首页' }, component: Home, beforeEnter: (to, from, next) => { console.log("routes---beforeEnter"); next(); } }
【3】beforeRouteEnter、beforeRouteLeave、beforeRouteUpdate：这三个导航守卫都是组件内部独享的，也就是说，每个组件都可以去配置自己的导航守卫.
（1） 强调 beforeRouteUpdate：如果在浏览器地址栏输入一个url，回车跳转到某个页面，是不会触发这个导航守卫的，只有在页面内部通过 this.$router.push/replace/go 并且 路由改变，但组件复用时，
才能触发这个导航守卫.
beforeRouteUpdate(to, from, next) { // 在当前路由改变，但是该组件被复用时调用 // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候， // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 // 可以访问组件实例 `this` },
（2）beforeRouteEnter也有其特殊之处：
beforeRouteEnter(to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不！能！获取组件实例 `this` // 因为当守卫执行前，组件实例还没被创建 },
如果希望获取 this，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。
beforeRouteEnter (to, from, next) { next(vm => { // 通过 `vm` 访问组件实例 console.log(vm); // 结果是当前组件实例，也就相当于是组件中 created 和 mounted 中的 this }) }
同时，next 回调是在组件 created 生命周期钩子函数执行完毕，mounted 钩子函数执行前执行的. 这是个人的输出打印.
// created // VueComponent {_uid: 11, _isVue: true, $options: {…}, _renderProxy: PRoxy, _self: VueComponent, …} // mounted
（3）beforeRouteLeave 作用相对简单容易理解，这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。【官网文档解释】
beforeRouteLeave (to, from, next) { const answer = window.confirm('Do you really want to leave? you have unsaved changes!') if (answer) { next() } else { next(false) } }
【4】导航守卫执行顺序：【个人输出打印结果------调用的导航守卫可能并不完全，但比较常用了】
router---beforeEach routes---beforeEnter component---beforeRouteEnter created VueComponent {_uid: 11, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …} mounted // 这一步是页面参数更新后结果 router---beforeEach component---beforeRouteUpdate// 这一步是跳转到其他路由地址页面的结果component---beforeRouteLeaverouter---beforeEach
以上是脚本宝典为你收集整理的vue-router导航守卫理解全部内容，希望文章能够帮你解决vue-router导航守卫理解所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。