vue-router钩子函数

最新推荐文章于 2025-07-10 10:01:45 发布

原创最新推荐文章于 2025-07-10 10:01:45 发布 · 377 阅读

2 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了Vue Router的三种路由守卫类型：全局前置守卫、全局后置钩子以及路由独享守卫。通过示例代码展示了如何在不同场景下使用beforeEach、afterEach、beforeEnter、beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave等钩子函数，以实现精细化的路由控制和组件生命周期管理。

vue-router钩子函数有三个类型，分别是全局路由守卫，单个路由守卫和组件独享守卫。

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});
//全局前置守卫
router.beforeEach((to, from, next) => {
});
// 全局后置钩子
router.afterEach((to, from) => {
});

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

  beforeRouteEnter(to, from, next) {
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
  }