全局后置钩子 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 底部即可生效。
