Vue Router 进阶 路由守卫

1.全局前置守卫

router.beforEach( (to, from , next) =>{

} )

to : 即将进入的路由

from : 从哪个路由离开

next() : 决定是否展示你要看到的路由页面

使用时可以在meta原始数据中定义标识符

2.路由独享守卫

在路由配置上定义beforeEnter

beforeEnter : ( to , from , next ) => {}

用法跟全局一样，   只是，将其写进其中一个路由对象中，只在这个路由下起作用。

beforeEnter 守卫只在进入路由的是时候才会触发，不会在params，query 或 hash改变时触发

3.全局解析守卫

router.beforeResolve 

和before.beforeEach 类似 因为他在每次导航时都会被触发

但是确保在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被正确调用。

router.beforeResolve 是获取数据或执行任何其他操作（如果用户无法进入页面时你希望避免执行的操作）的理想位置。

4.全局后置钩子

router.afterEach

router.afterEach(( to , from)=>{ })

不同于前置守卫，后置钩子并没有 next 函数，也不会改变导航本身

它们对于分析、更改页面标题、声明页面等辅助功能以及许多其他事情都很有用。

5.组件内的守卫  你可以为路由组件添加以下配置

* beforeRouterEnter

* beforeRouterUpdate

* beforeRouterLeave

beforeReouterEnter( to , from) {}

在渲染该组件的对应路由被验证前调用，不能获取该组件实例  this   （因为当守卫执行时，组件实例还没被创建）

解决这时候不能获取实例this

通过传一个回调给 next 来访问组件实例

beforeRouterEnter((to , from next)=>{

next( vm=>{

//通过vm 访问组件实例

})

})

beforeReouterUpdate( to , from) {}

在当前路由改变时，但是该组件被复用时调用

举例来说，对于一个带有动态参数的路径  `/users/id`, 在 `/users/1` 和  `users/2` 之间跳转的时候。由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用，

这个时候beforeRouterUpdate 就在这个情况下调用。

因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 this

他也可以通过上述 beforeRouterEnter 中next（） 访问实例，但是完全没必要　　

beforeReouterLeave( to , from) {}


在导航离开渲染该组件的对应路由时调用

与beforeRouterUpdate 一样，也可以访问组件实例 this

这个 离开守卫 通常用来预防用户在还未保存修改前突然离开。该导航可以通过返回 false 来取消

完整的导航解析流程

1、导航被触发。

2、在失活的组件里调用离开守卫。

3、调用全局的 beforeEach 守卫。

4、在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。

5、在路由配置里调用 beforeEnter。

6、解析异步路由组件。

7、在被激活的组件里调用 beforeRouteEnter。

8、调用全局的 beforeResole 守卫 (2.5+)。

9、导航被确认。

10、调用全局的 afterEach 钩子。

11、触发 DOM 更新。

12、用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。