导航守卫
解释：“导航”表示路由正在发生改变；
导航守卫的作用
Vue Router 提供的导航守卫主要用来通过跳转或者取消跳转的方式来守卫导航；一个简单的例子：从一个界面跳转到另一个新的界面中，如果需要满足特定的条件才能发生跳转，这时候就需要用到导航守卫(钩子函数)，比如：从商品界面需要跳转到购物车界面，在这个过程中需要用户的登录状态，这样就可以在特定的导航钩子函数中进行判断，跳转还是取消跳转；
注意：当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行的，此时导航在所有守卫 解析 完之前一直处于等待中；也就是说导航的跳转与否完全取决于导航守卫，导航的跳转会在导航守卫在给出决定之前一直处于等待状态；
导航守卫的分类
一、全局导航守卫
全局导航守卫分为三种：
1.全局前置守卫 —— router.beforeEach()
我们可以使用 router.beforeEach() 注册一个全局前置守卫：
语法：正如上图中所示 router.beforeEach((to, from, next) => { // 函数处理代码 })
参数说明：每个守卫方法接受三个参数：
- to:即将要进入的路由对象；
- from:当前路由正要离开的路由对象；
- next:一定要调用该方法来解析这个钩子，否则在导航跳转时没有任何效果。执行效果依赖 next 方法的调用参数；
- next()：进行管道的下一个钩子；
- next(false)：中断当前的导航；
- next(’/’) 或者 next({ path: ‘/’ })：跳转到一个不同的地址，在导航到一个界面时，如果不满足跳转条件，使用该方法跳转到另一个界面，代码示例如下：
2.全局后置守卫 —— router.afterEach()
可以使用 router.afterEach() 注册一个全局后置守卫，和其他守卫(包括组单个路由独享的守卫以及组件中的守卫)不同的是，全局后置守卫不会接受 next() 函数，也不会改变导航本身；
语法：正如上图中所示 router.afterEach((to, from) => { // 函数处理代码 })
3.全局解析守卫 —— router.beforeResolve()
2.5.0 新增。在2.5.0+你可以使用 router.beforeResolve() 注册一个全局解析守卫。
二、(单个)路由独享的守卫
单个路由独享的守卫只有一种：
我们可以在路由配置上直接定义 beforeEnter 守卫：
三、组件中的守卫
组件内的守卫分为三种：
- beforeRouterEnter()
- beforeRouterUpdate() 2.2新增
- beforeRouterLeave()
注意：beforeRouterEnter 守卫不能访问this，因为守卫在导航确认前被调用，因此即将登场的新组建还没被创建；
可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。
注意：beforeRouteEnter 是支持给 next 传递回调的唯一守卫。对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持传递回调，因为没有必要了；