router.aftereach 是 vue router 的全局后置钩子，在路由跳转完成、组件挂载、dom 更新后执行，适用于埋点统计、标题设置、滚动复位等收尾操作，不支持异步阻塞或导航修改。
router.afterEach 是 Vue Router 提供的全局后置钩子，它在每次路由跳转完成、组件已挂载、DOM 已更新后执行，适合做埋点统计、标题设置、滚动复位等“收尾型”操作。
注册方式与基本用法
必须在路由实例创建完成后、应用挂载前注册，通常写在 router/index.js 文件底部：
- 接收两个必选参数：to（目标路由对象）、from（来源路由对象），不接收 next 函数
- 不支持异步阻塞（不能 await）、不能修改导航（无法重定向或取消）
- 刷新页面时也会触发，覆盖首次加载场景
自动更新页面标题
配合路由 meta 字段统一管理 document.title，避免在每个组件中重复设置：
- 定义路由时声明标题：
{ path: '/user', name: 'UserList', meta: { title: '用户管理' } } - 在 afterEach 中赋值：
document.title = to.meta.title || '默认首页' - 如需多语言支持，可结合 i18n：
document.title = useI18n().t(to.meta.title)（确保 i18n 实例已初始化）
页面埋点与行为统计
利用 to 和 from 获取上下文信息，上报 PV、来源页、停留时长等数据：
- 推荐在 to.meta 中预设埋点字段，例如
trackId: 'page_user_list'或pageType: 'list' - 通过埋点 SDK 发送数据，如：
sdk.track('pv', { page: to.name, ref: from.name, duration: Date.now() - startTime }) - 建议将埋点逻辑封装为独立函数，便于测试和复用（尤其在 Vue 3 + Composition API 场景下）
辅助 UI 状态恢复
DOM 就绪后执行轻量级操作，提升用户体验：
- 回到页面顶部：
window.scrollTo(0, 0) - 聚焦某个元素（如搜索框）：
document.getElementById('search-input')?.focus() - 触发第三方脚本（如百度统计）：
_hmt.push(['_trackPageview', to.fullPath]) - 注意：不要在此处发起网络请求或执行耗时同步操作，以免影响渲染性能
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
