Vue路由钩子完全指南

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

1. 全局钩子函数

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

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

javascript 复制代码

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

beforeResolve：在所有组件内守卫和异步路由解析后触发，适用于需等待数据加载的场景。
afterEach ：导航结束后调用，无next参数，常用于日志记录或页面追踪。
示例：
javascript 复制代码
```
router.afterEach((to, from) => {
  console.log(`Navigated to: ${to.path}`);
});
```

2. 路由独享守卫

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

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

javascript 复制代码

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 => {})访问实例。
示例代码：
javascript 复制代码
```
export default {
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.fetchData(); // 进入后初始化数据
    });
  }
};
```
beforeRouteUpdate ：当前路由参数变化时触发（如/user/1到/user/2），用于响应式更新数据。

beforeRouteLeave ：离开路由前调用，防止用户误操作丢失数据（如未保存表单）。
示例：

javascript 复制代码

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，可实现细粒度的路由控制。