vue 路由守卫-afterEach

router.afterEach 是 Vue Router 提供的全局后置守卫，用于在路由导航完成后执行特定逻辑。与 beforeEach 不同，它的执行时机更靠后且不干预导航结果。也就是说，这个方法在页面全部加载完毕后执行。

以下是其核心特性和使用场景的清晰说明：

一、核心作用

1. 导航完成后的回调
   当路由切换完全完成（包括地址栏更新、组件激活等）时触发，适合执行与导航结果相关的操作[1][2]。
2. 无需控制导航
   由于导航已经完成，afterEach 不需要调用 next 函数，也无法修改导航结果[1][3][5]。

二、基本用法

1. 注册全局守卫
   在 Vue Router 实例上调用 afterEach，传入一个接收 to 和 from 参数的函数：

   router.afterEach((to, from) => {
     // 导航完成后执行的逻辑
   });
   

   • 参数说明：
     • to：目标路由对象（已进入的路由信息）[2][5]。
     • from：来源路由对象（已离开的路由信息）[2][5]。

2. 典型场景示例

   • 页面访问统计（埋点）：

     router.afterEach((to) => {
       logPageView(to.path); // 记录用户访问路径
     });
     

   • 页面标题同步：

     router.afterEach((to) => {
       document.title = to.meta.title || "默认标题";
     });
     

三、工作原理

1. 执行时机
   afterEach 在以下阶段被触发：

   • 路由切换已被验证通过（所有前置守卫如 beforeEach、beforeResolve 已执行完成）[2]。
   • 浏览器地址栏已更新为新的 URL[2]。
   • 注意：此时目标路由的组件可能尚未完成异步加载（如懒加载的组件）[2]。

2. 与 beforeEach 的对比

   特性	beforeEach	afterEach
   执行阶段	导航触发后，组件加载前	导航完成后，组件激活后
   能否控制导航	能（通过 next 函数）[4][5]	不能[1][3]
   典型用途	权限验证、中断导航	日志记录、页面标题更新

四、应用场景

1. 日志与埋点
   记录用户访问路径、停留时长等数据[1][3]。
2. 页面标题同步
   根据路由元信息（meta）动态设置页面标题[3]。
3. 全局状态清理
   在路由切换后重置某些全局状态（如关闭全局弹窗）[2]。
4. 性能监控
   统计页面加载耗时（结合 beforeEach 记录时间差）[2]。

五、注意事项

• 异步组件未加载完成：afterEach 触发时，懒加载的组件可能仍在请求中，因此依赖组件内容的操作（如访问组件数据）需谨慎[2]。
• 无返回值：由于导航已结束，函数返回值不会影响后续流程[1][3]。

通过合理使用 router.afterEach，开发者可以高效实现与路由导航结果相关的全局逻辑，且无需担心阻塞或修改导航流程[1][3]。