全局后置钩子 aftereach 在路由跳转完成、dom 更新后执行，适用于埋点上报、标题更新等收尾操作；接收 to 和 from 路由对象，支持通过 meta 配置字段，不可异步阻塞或修改导航。

全局后置钩子 afterEach 是 Vue Router 提供的导航守卫之一，它在每次路由跳转完成、DOM 更新（即组件已渲染）后执行，适合做页面埋点上报、标题更新、行为统计等“收尾型”操作。

监听页面切换并上报埋点数据

利用 to 参数可获取目标路由信息，结合埋点 SDK（如神策、GrowingIO 或自研埋点）发送 PV、停留时长、来源页等数据：

• 在 router.afterEach((to, from) => {...}) 中，to 是目标路由对象，含 name、path、query、params 等；from 是上一个路由，可用于计算来源或停留时长
• 建议在 to.meta 中预设埋点字段（如 trackId、pageType），避免硬编码路径匹配
• 注意：不要在此处进行异步阻塞操作（如 await 请求），afterEach 不支持返回 Promise，也不支持修改导航流程

自动同步 document.title

配合路由元信息 meta.title 实现标题动态切换，比在每个组件中手动 mounted 设置更统一、低侵入：

• 定义路由时设置标题：{ path: '/user', name: 'UserList', meta: { title: '用户列表' } }
• 在 router.afterEach 中写：document.title = to.meta.title || '默认标题'
• 如需支持多语言，可将 title 设为 i18n key，再通过 useI18n().t(to.meta.title) 动态翻译（注意确保 i18n 实例已初始化）

补充说明与注意事项

afterEach 不会接收 next 函数，无法取消或重定向导航——这是它和 beforeEach 的关键区别。若需拦截跳转，请用前置守卫；若只需“事后响应”，afterEach 最合适。

• 它在所有组件 updated 钩子之后执行，确保 DOM 已就绪，适合操作真实 DOM（如 focus 某个元素、触发第三方统计脚本）
• 刷新页面时也会触发（因为是一次完整导航），所以首次进入也能覆盖
• 如果使用 Vue 3 + Composition API，推荐将埋点逻辑封装成独立函数，在 afterEach 中调用，便于单元测试和复用

不复杂但容易忽略：确保 afterEach 注册在路由实例创建之后、应用挂载之前，通常放在 router/index.js 底部即可生效。