当前位置：首页 > VUE

vue路由守卫实现原理

2026-02-24 07:30:18VUE

Vue 路由守卫实现原理

Vue 路由守卫的核心是通过 Vue Router 提供的钩子函数，在路由跳转的不同阶段进行拦截或处理。这些钩子函数分为三类：全局守卫、路由独享守卫和组件内守卫。

全局守卫

全局守卫作用于所有路由跳转，包括：

router.beforeEach：在路由跳转前触发，常用于权限验证。
router.beforeResolve：在导航被确认前触发，适合确保异步组件加载完成。
router.afterEach：在路由跳转完成后触发，无修改能力。

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

路由独享守卫

在路由配置中直接定义，仅对当前路由生效：

vue路由守卫实现原理

beforeEnter：在进入特定路由前触发。

const routes = [
  {
    path: '/admin',
    component: Admin,
    beforeEnter: (to, from, next) => {
      if (!isAdmin()) next('/');
      else next();
    }
  }
];

组件内守卫

在组件内部通过生命周期钩子实现：

beforeRouteEnter：组件实例未创建时调用，无法访问 this。
beforeRouteUpdate：当前路由改变但组件复用时触发。
beforeRouteLeave：离开当前路由前触发，常用于阻止未保存的修改。

export default {
  beforeRouteLeave(to, from, next) {
    if (this.hasUnsavedChanges) {
      if (confirm('离开后更改将丢失，确认离开？')) next();
      else next(false);
    } else next();
  }
};

底层实现机制

路由切换流程
Vue Router 通过监听 URL 变化触发路由匹配，生成目标路由记录（Route Record），并执行导航解析流程。守卫钩子在此过程中被依次调用。

异步队列处理
守卫钩子可能返回 Promise，路由系统会等待异步操作完成。例如：

beforeRouteEnter(to, from, next) {
  fetchData().then(data => {
    next(vm => vm.setData(data));
  });
}

导航确认与取消
调用 next() 会进入下一守卫或完成导航；next(false) 中断导航；next(path) 重定向。
组件生命周期整合
beforeRouteEnter 在组件 beforeCreate 前执行，而 beforeRouteLeave 在 beforeDestroy 前触发。