vue vue-router 各个守卫的详细理解

导航守卫分类

导航守卫按照维度分三个：

全局的：进入任何一个路由都会执行

• beforeEach：进入路由前执行
• beforeResolve：在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用
• afterEach：导航确认执行时执行，可理解为导航完成时执行

路由的：进入某个路由才会执行

• beforeEnter: 进入该路由前

组件的：进入某个组件才会执行组件复用时

• beforeRouteEnter： 进入组件时
• beforeRouteUpdate： 组件被复用时调用
• beforeRouteLeave： 离开组件前

例子

这么多的函数，执行先后顺序是什么呢，如何使用？请看下面的例子：

导航守卫的解析流程

在上面的代码中加入了所有的守卫导航函数，下面来看看几种情况导航守卫的解析流程：

首先进入  '/bar/123'  即进入一个组件可以看到，控制台打印为：

然后我们将路径更改为：'/bar/234‘，复用组件

'

最后更改为 ’/home' ，离开组件

从上面可以很好地理解导航的解析流程。

一些小坑

• next()

对于有next()的钩子函数

        // 正常跳转到下一个页面，
            next()
        // 跳转到指定页面 
            // 不能直接next('/error')，会陷入死循环 参考https://segmentfault.com/q/1010000012316727q/1010000012316727
            to.path == '/error' ?  next() : next('/error')
        // 只能停留在当前页面
            next(false)

• beforeRouteUpdate

如果不加这个钩子，则路由变化时，页面检测不到数据变化：

             beforeRouteUpdate (to, from, next) {
               next()
             }