vue-router导航守卫

官方文档

• 导航 表示路由正在发生改变

• 守卫方法的三个参数： to: Route(目标的路由) ; from: Route(离开的路由) ; next: Function() (是否执行目标路由)

  • next(): 执行下一个钩子
  • next(false): 中断当前导航。如果url改变重置到from
  • next('/') / next({path:'/'}): 跳转到不同地址
  • next(error): 导航终止&将错误传递给router.onError()

    全局前置守卫

    router.beforeEach

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
    // ...
})

路由独享的守卫

在路由配置的守卫 beforeEnter , (对于进入该路由进行控制)

const router = new VueRouter({
    routes: [
        {
            path: '/foo',
            component: Foo,
            beforeEnter: (to, from, next) => {
                // ...
            }
        }
    ]
})

组件内部守卫

对出入该组件路由进行控制

beforeRouteEnter (to, from, next) {
  // 在渲染该组件的对应路由被 confirm 前调用
  // 不！能！获取组件实例 `this`
  // 因为当守卫执行前，组件实例还没被创建
},

beforeRouteUpdate (to, from, next) {
  // 在当前路由改变，但是该组件被复用时调用
  // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
  // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
  // 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
  // 导航离开该组件的对应路由时调用
  // 可以访问组件实例 `this`
}

完整生命周期

1. 导航被触发。
2. 在失活的组件里调用 beforeRouteLeave 守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫。
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。
12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。