vue高级篇——vue router之NavigationGuards（导航卫士）

最近无聊，就更新个路由的导航卫士吧

vue-router官方文档：https://router.vuejs.org/

1、全局前卫——router.beforeEach

看名字就知道啦，beforeEach在路由跳转之前触发。

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

to：要导航到的目标Route对象，简单点说就是到哪里去。

form：当前离开的对象，简单点说就是从哪儿来。

next：必须调用此函数才能解决钩子。该操作取决于提供给next的参数，如下：

1. next()：表示直接通过，导航被确认。
2. next(false)：中止当前导航。如果浏览器URL被更改（由用户手动或通过后退按钮更改），它将被重置为该from路由的URL 。
3. next('/')或者next({path:'/'})：重定向到其他位置。当前导航将被中止，并且开始新的导航。
4. next(error)：版本2.4.0以后才有。导航将被中止，并且错误将传递给通过进行注册的回调 router.onError()。

确保始终调用next函数，否则挂钩将永远无法解析

 

待更新。。。

 

总结：router导航卫士，执行流程

1、导航触发

2、唤醒beforeRouterLeave 

3、唤醒全局路由守卫beforeEach

4、beforeRouterUpdate重新调用呼叫警卫

5、调用beforeEnter路由配置

6、解决异步路由组件

7、调用beforeRoterEnter激活的组件

8、唤醒全局beforeResolve

9、导航确认

10、调用全局afterEach

11、触发DOM更新

12、唤醒next的beforeRouterEnter实例化