- vue-router提供的导航守卫主要用来通过跳转或者取消的方式守卫导航。有多个机会植入路由导航过程中：全局的，单个路由独享的，或者组件级的
- 应用：比如在路由跳转前作一些验证，比如登陆验证，vue-router提供的beforeEach可以方便的实现全局导航守卫
导航守卫解析流程
- 导航被触发//相当于鼠标点击事件
- 在失活的组件里调用离开守卫
- 调用全局的beforeEach守卫
- 在重要的组件里调用beforeRouteUpdate守卫（2.2+）//更新守卫
- 在路由配置里调用beforeEnter
- 解析异步路由组件
- 在激活的组件里调用beforeRouteEnter//相当于鼠标滑过
- 调用全局的beforeResolve守卫（2.5+）
- 导航被确认
- 调用全局的afterEach钩子
- 触发DOM更新
- 用创建好的实例调用beforeRouterEnter守卫传递给next的回调函数
前置守卫
- router.beforeEach注册一个全局前置守卫
- 当一个导航被触发时，全局前置守卫按照创建顺序调用，守卫是异步解析执行，此时导航在所有守卫resolve完之前一直处于等待中
- 语法
- router.beforeEach((to,from，next)=>{//...})
- to:Route:即使将要进入的目标路由对象
- from：Route：当前导航正要离开的路由
- next：Function：一定要调用该方法来resolve这个钩子。执行效果依赖next方法的调用参数
- next():进行管道中的下一个钩子，如果全部钩子执行完了，则导航的状态就是confirmed（确认的）
- next(false): 中断当前的导航。如果浏览器的 URL 改变了 可能是用户手动或者浏览器后退按钮)，那么URL 地址会重置到 from 路由对应的地址。
- next('/')或者next(path:)):跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向next传递任意位置对象，且允许设置诸如 replace: true、name: home'之类的选项以及任何用在router-link 的to prop 或 router.push 中的选项。
- router.beforeEach((to,from，next)=>{//...})
后置守卫
- 所有路由都加载完成
- 全局后置钩子，然而和守卫不同的是，这些钩子不会接受next函数也不会改变导航本身
- 语法
router.afterEach((to,from)=>{ alert(.....); }) 注：用法和前置一样
独享守卫
直拦截某一个组件 以在路由配置上直接定义beforeEnter守卫： 独享守卫可以单独拦截某个组件 语法：
const route= new VueRouter（{
routes:[
{
path:'./foo',
component:Foo,
beforeEnter.(to,from,next)=>{////}
}
]
}）
注：守卫与全局前置守卫的方法参数是一样的。
总结
类型:beforeRouteEnter、beforeRouteUpdate(2.2新增)、beforeRouteLeave
const Foo ={
template:'...',
beforeRouteEnter (to,from, next){
//在渲染该组件的对应路由被 confirm 前调用
//不!能!获取组件实例this
//因为当守卫执行前，组件实例还没被创建
},
beforeRouteUpdate(to, from, next){
//在当前路由改受。
//举例来说，对于一个带有动态参数的路径/foo/:id，在/fo/1和/foo/2 之间跳转的时候。
//由于会渲染同样的Foo 组件，因此组件实例会被复用，而这个钩子就会在这个情况下被调用。
// 可以访问组件实例this
}，
beforeRouteLeave(to,from,next){
//导航离开该组件的对应路由时调用
//可以访问组件实例'this'
}
}
