• home > webfront > ECMAS > vue >

    Vue Router(1):导航守卫

    Author:zhoulujun Date:

    跳转死循环,页面永远空白,如: router beforeEach((to, from, next) => {if(登录){ next() }else{ next({name: login }); }}); 因为对路由钩子与守卫了解的不够通透

    从官方来看: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:导航离开该组件的对应路由时调用

    完整的导航解析流程

    1. 导航被触发。

    2. 在失活的组件里调用 beforeRouteLeave 守卫。

    3. 调用全局的 beforeEach 守卫。

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

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

    6. 解析异步路由组件。

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

    8. 调用全局的 beforeResolve 守卫 (2.5+)。

    9. 导航被确认。

    10. 调用全局的 afterEach 钩子。

    11. 触发 DOM 更新。

    12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数,创建好的组件实例会作为回调函数的参数传入。



    转载本站文章《Vue Router(1):导航守卫》,
    请注明出处:https://www.zhoulujun.cn/html/webfront/ECMAScript/vue/8579.html