Vue Router(1)：导航守卫
Author：zhoulujun Date：
从官方来看：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#全局前置守卫
基本概念，看官方：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#全局前置守卫
钩子和守卫
钩子和守卫不同的是：钩子不会接受 next 函数也不会改变导航本身
导航控制分为三种：
全局的
全局添加：是指路由实例上直接操作的钩子函数，他的特点是所有路由配置的组件都会触发，直白点就是触发路由就会触发这些钩子函数
全局前置守卫：router.beforeEach((to, from, next) => { // ... })
全局解析守卫：router.beforeResolve((to, from, next) => { // ... })
这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。
在 2.5.0+ 你可以用
全局后置钩子：router.afterEach((to, from) => { // ... })
这和 router.beforeEach 类似
区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。
单个路由独享的
在路由配置上直接定义 beforeEnter 守卫：
beforeEnter：{ beforeEnter: (to, from, next) => { // ... } ,path: '/foo', component: Foo}
组件内的
是指在组件内执行的钩子函数，类似于组件内的生命周期，相当于为配置路由的组件添加的生命周期钩子函数。
beforeRouteEnter：在渲染该组件的对应路由被 confirm 前调用（组件实例还没被创建，因为不可访问组件）
beforeRouteEnter 守卫 不能 访问 this，因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建。
beforeRouteEnter (to, from, next) { next(vm => { // 通过 `vm` 访问组件实例 }) }
对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持传递回调，因为没有必要了。
beforeRouteUpdate (2.2 新增)：在当前路由改变，但是该组件被复用时调用
beforeRouteLeave：导航离开该组件的对应路由时调用
完整的导航解析流程
导航被触发。
在失活的组件里调用 beforeRouteLeave 守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。
转载本站文章《Vue Router(1)：导航守卫》,
请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/vue/8579.html