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