当前位置：首页 > VUE

vue导航守卫实现原理

2026-02-23 05:25:13VUE

Vue 导航守卫实现原理

Vue 导航守卫是 Vue Router 提供的核心功能之一，用于在路由跳转前后执行特定逻辑（如权限验证、数据预加载等）。其实现原理主要基于路由钩子函数和异步执行队列。

导航守卫的分类

全局守卫
- beforeEach：全局前置守卫，路由跳转前触发。
- beforeResolve：全局解析守卫，在所有组件内守卫和异步路由组件解析后触发。
- afterEach：全局后置守卫，路由跳转完成后触发。
路由独享守卫
- 在路由配置中直接定义 beforeEnter 钩子。
组件内守卫
- beforeRouteEnter：组件渲染前触发（无法访问 this）。
- beforeRouteUpdate：组件复用时触发（如动态参数变化）。
- beforeRouteLeave：离开组件前触发。

实现机制

钩子函数注册
Vue Router 通过 router.beforeEach 等方法将守卫函数存入内部队列（如 beforeHooks）。例如：
```
router.beforeEach((to, from, next) => { /*逻辑*/ });
```
路由跳转流程
- 调用 router.push 或触发路由变更时，Vue Router 会创建一个导航对象（navigation），并依次执行守卫队列。
- 通过 runQueue 函数异步执行队列中的钩子，确保顺序性：
```
runQueue(queue, iterator, callback);
```
  其中 iterator 负责调用每个守卫函数，并处理 next 回调。
next 函数的作用
- next()：继续执行下一个守卫或完成导航。
- next(false)：中断当前导航。
- next(path)：重定向到新路径。
- next(error)：触发错误处理。
组件守卫的注入
组件内守卫通过 Vue 的混入（mixin）机制注入到组件生命周期中。例如：
```
Vue.mixin({
  beforeCreate() {
    if (this.$options.beforeRouteEnter) {
      // 注册组件钩子
    }
  }
});
```

关键代码片段

Vue Router 的核心逻辑简化如下：

function runQueue(queue, fn, cb) {
  const step = index => {
    if (index >= queue.length) return cb();
    const hook = queue[index];
    fn(hook, () => step(index + 1));
  };
  step(0);
}