路由守卫知识点总结

weixin_38848724

已于 2023-06-02 10:55:31 修改

阅读量44

点赞数

文章标签： vue.js javascript 前端

于 2023-06-02 10:34:47 首次发布

本文链接：https://blog.csdn.net/weixin_38848724/article/details/131001896

版权

VueRouter的导航钩子用于拦截和管理路由的跳转，包括全局的前置和后置守卫，路由独享的钩子以及组件内的beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave。这些钩子允许在路由变化时进行条件判断、数据预加载等操作。在导航解析流程中，从触发到确认，各个守卫和钩子按顺序执行，控制着路由的变更过程。

摘要由CSDN通过智能技术生成

导航钩子的作用

vue-router 的导航钩子，主要用来作用是拦截导航，让他完成跳转或取消。

植入路由导航的方式

* 全局的
* 单个路由独享的
* 组件级的

全局的主要有两种

 前置守卫
const router = new VueRouter({ ... });
router.beforeEach((to, from, next) => {
    //to 代表要进入的目标 是一个路由对象
    //from 代表当前要离开的路由 同样也是一个路由对象
    //next 必须调用 的方法 否则钩子函数无法resolved  意思是下一步
    // do someting
});

  后置钩子
    router.afterEach((to, from) => {
        //to 代表要进入的目标 是一个路由对象
        //from 代表当前要离开的路由 同样也是一个路由对象
        // do someting
    });

后置钩子是没有next函数的 也不会改变导航本身

路由独享的钩子(单个路由独享的导航钩子，它是在路由配置上直接进行定义的)

cont router = new VueRouter({
routes: [
           {
            path: '/file',    
            component: File,
            beforeEnter: (to, from ,next) => {
                //参数和全局前置守卫一样
                // do someting
            }
        }
    ]
});

组件内的导航钩子

  组件内的导航钩子主要有这三种：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。他们是直接在路由组件内部直接进行定义的

  const File = {
        template: `<div>This is file</div>`,
        beforeRouteEnter(to, from, next) {
            // do someting
            // 在渲染该组件的对应路由被 confirm 前调用
        },
        beforeRouteUpdate(to, from, next) {
            // do someting
            // 在当前路由改变，但是依然渲染该组件是调用
        },
        beforeRouteLeave(to, from ,next) {
            // do someting
            // 导航离开该组件的对应路由时被调用
        }
    }

beforeRouteEnter 不能获取组件实例 this，因为当守卫执行前，组件实例被没有被创建出来，剩下两个钩子则可以正常获取组件实例 this 但是并不意味着在 beforeRouteEnter 中无法访问组件实例，我们可以通过给 next 传入一个回调来访问组件实例。在导航被确认是，会执行这个回调，这时就可以访问组件实例了，==如：

beforeRouteEnter(to, from, next) {
    next (vm => {
        // 这里通过 vm 来访问组件实例解决了没有 this 的问题
    })
}

仅仅是 beforRouteEnter 支持给 next 传递回调，其他两个并不支持。因为归根结底，支持回调是为了解决 this 问题，而其他两个钩子的 this 可以正确访问到组件实例，所有没有必要使用回调

完整的导航解析流程

 1.导航被触发
 2.在失活的组件里调用离开守卫
 3.调用全局的 beforeEach 守卫
 4.在重用的组件里调用 beforeRouteUpdate 守卫
 5.在路由配置里调用 beforEnter
 6.解析异步路由组件
 7.在被激活的组件里调用 beforeRouteEnter
 8.调用全局的 beforeResolve 守卫
 9.导航被确认
 10.调用全局的 afterEach 钩子
 11.触发 DOM 更新
 12.在创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数