vue路由守卫实现原理

Vue 路由守卫实现原理

Vue 路由守卫是通过 Vue Router 提供的钩子函数实现的，主要用于在路由跳转前后执行特定逻辑（如权限验证、数据预加载等）。其核心原理依赖于路由实例的生命周期钩子和导航解析流程。

路由守卫的分类

1. 全局守卫

   • router.beforeEach：全局前置守卫，在路由跳转前触发。
   • router.beforeResolve：全局解析守卫，在导航被确认前触发。
   • router.afterEach：全局后置守卫，在路由跳转完成后触发。

2. 路由独享守卫
   在路由配置中通过 beforeEnter 定义，仅对当前路由生效。

3. 组件内守卫

   • beforeRouteEnter：进入组件前触发（无法访问 this）。
   • beforeRouteUpdate：当前路由改变但组件复用时触发。
   • beforeRouteLeave：离开组件前触发。

实现机制

1. 导航触发流程
   路由跳转时，Vue Router 会依次执行以下流程：

   • 触发 beforeEach 全局守卫。
   • 调用路由配置中的 beforeEnter。
   • 触发组件内的 beforeRouteEnter。
   • 调用 beforeResolve 全局守卫。
   • 确认导航后更新视图。
   • 触发 afterEach 全局守卫。

2. 守卫函数参数
   守卫函数接收三个参数：

   • to：目标路由对象。
   • from：当前路由对象。
   • next：控制导航行为的函数。
     • next()：继续导航。
     • next(false)：中断导航。
     • next(path)：重定向到指定路径。

3. 异步支持
   守卫函数可以返回 Promise，Vue Router 会等待其解析后再继续导航流程。

示例代码

// 全局前置守卫
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login');
  } else {
    next();
  }
});

// 路由独享守卫
const routes = [
  {
    path: '/admin',
    component: AdminPage,
    beforeEnter: (to, from, next) => {
      if (!isAdmin()) next('/');
      else next();
    }
  }
];

// 组件内守卫
const UserComponent = {
  beforeRouteEnter(to, from, next) {
    fetchUserData(to.params.id).then(user => {
      next(vm => vm.setUser(user));
    });
  }
};

注意事项

• next 调用必要性
  必须调用 next 方法，否则导航会挂起。

• beforeRouteEnter 的特殊性
  该守卫中无法访问组件实例 this，但可通过 next 回调传递数据。

• 性能优化
  避免在守卫中执行耗时操作，必要时使用异步或缓存机制。