Vue路由钩子完全指南

Vue.js中的路由导航钩子（Navigation Guards）主要用于在路由导航过程中进行拦截和处理，确保访问控制和状态管理。以下是主要分类及使用方法：

1. 全局钩子函数

作用于整个路由实例，需在路由配置外定义：

• beforeEach：在导航开始时执行，用于全局权限校验（如登录验证）。
  示例代码：

  router.beforeEach((to, from, next) => {
    if (to.meta.requiresAuth && !isAuthenticated) {
      next('/login'); // 重定向到登录页
    } else {
      next(); // 继续导航
    }
  });
  

• beforeResolve：在所有组件内守卫和异步路由解析后触发，适用于需等待数据加载的场景。
• afterEach：导航结束后调用，无next参数，常用于日志记录或页面追踪。
  示例：

  router.afterEach((to, from) => {
    console.log(`Navigated to: ${to.path}`);
  });
  

2. 路由独享守卫

在单个路由配置中定义，仅对特定路由生效：

• beforeEnter：在进入该路由前执行，参数与beforeEach一致。
  示例代码：

  const routes = [
    {
      path: '/user/:id',
      component: User,
      beforeEnter: (to, from, next) => {
        if (!checkPermission(to.params.id)) {
          next('/denied'); // 权限不足时拦截
        } else {
          next();
        }
      }
    }
  ];
  

3. 组件内钩子

直接在Vue组件中定义，控制组件级导航逻辑：

• beforeRouteEnter：进入路由前调用，此时组件实例未创建，无法访问this，但可通过next(vm => {})访问实例。
  示例代码：

  export default {
    beforeRouteEnter(to, from, next) {
      next(vm => {
        vm.fetchData(); // 进入后初始化数据
      });
    }
  };
  

• beforeRouteUpdate：当前路由参数变化时触发（如/user/1到/user/2），用于响应式更新数据。
• beforeRouteLeave：离开路由前调用，防止用户误操作丢失数据（如未保存表单）。
  示例：

  export default {
    beforeRouteLeave(to, from, next) {
      if (this.hasUnsavedChanges) {
        if (confirm('数据未保存，确认离开？')) next();
        else next(false); // 取消导航
      } else next();
    }
  };
  

关键使用原则

• 顺序执行：钩子按“全局 → 独享 → 组件内”顺序触发，next()必须调用以继续或终止导航。
• 参数说明：
  • to：目标路由对象。
  • from：当前路由对象。
  • next：控制导航流程的方法（next()放行，next(false)终止，next(path)重定向）。
• 避免阻塞：确保钩子逻辑简洁，避免长时间异步操作阻塞渲染。

这些钩子灵活集成于Vue Router，可实现细粒度的路由控制。