vue-router钩子函数和执行顺序

最新推荐文章于 2021-10-05 14:37:41 发布

chen-cc

最新推荐文章于 2021-10-05 14:37:41 发布

阅读量617

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_54228045/article/details/116429629

本文详细解读了Vue Router的全局和路由独享守卫，以及组件内的生命周期钩子，包括beforeEach、beforeEnter、beforeRouteEnter等，并探讨了它们在实际项目中的执行顺序和应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
vue-router的导航守卫实际和组件的生命周期都是同一类型的钩子函数，在一个特定时间内会触发。

导航守卫有三个类型，分别是全局的钩子（针对整个路由器实例），单个路由对象的钩子和组件内的钩子。

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

//全局前置守卫
router.beforeEach((to, from, next) => {
});

// 全局解析守卫
router.beforeResolve((to, from, next) => {
});

// 全局后置钩子
router.afterEach((to, from) => {
});

以上三个都是全局钩子，无论是哪个路由对象被激活，这些钩子都会被触发，只是触发的时机不同。
针对单个路由对象的钩子：

{
path: "/",
name: "Home",
component: Home,
// 路由独享守卫
beforeEnter: (to, from, next) => {
},
},

组件内的钩子：

beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },

  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 可以访问组件实例 `this`
  },

  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }

一个实际项目中，如果涉及有导航切换，则钩子函数和生命周期的执行顺序应该是有两种情况：

1.打开页面的任意一个页面，没有发生导航切换。

全局前置守卫beforeEach (路由器实例内的前置守卫)->路由独享守卫beforeEnter(激活的路由)->组件内守卫beforeRouteEnter(渲染的组件)->全局解析守卫beforeResolve(路由器实例内的解析守卫)->全局后置钩子afterEach(路由器实例内的后置钩子)->beforeCreate->Created->beforeMount->Mounted

总结一下大概是这样：this. $r o u t e r (b e f o r e E a c h) - > t h i s .$ route(beforeEnter)->this(beforeRouteEnter)->this. $r o u t e r (b e f o r e R e s o l v e) - > t h i s .$ router(afterEach)->this(某个组件的生命周期 beforeCreate->Created->beforeMount->Mounted)
2. 如果是有导航切换的(从一个组件切换到另外一个组件)

组件内守卫beforeRouteLeave(即将离开的组件)->全局前置守卫beforeEach (路由器实例内的前置守卫)->组件内守卫beforeRouteEnter(渲染的组件)->全局解析守卫beforeResolve(路由器实例内的解析守卫)->全局后置钩子afterEach(路由器实例内的后置钩子)->beforeCreate->created->beforeMount->beforeDestroy->destroyed->mounted