页面访问埋点应使用 router.aftereach 而非 onmounted，因其在路由跳转完成、组件挂载、dom 更新后执行，可准确获取 fullpath、name、query、from 及 meta 信息并上报 pv；通过时间戳差值计算停留时长 tp，过滤 ≤500ms 无效值；onmounted 在路由复用时不触发、侵入性强、无法获来源页且 dom 可能未就绪；异常捕获需结合 errorcaptured 与全局 error/unhandledrejection。
页面访问埋点的自动上报，核心是“不改业务组件也能触发”，最稳妥的方式不是靠组件内 onMounted，而是利用路由守卫统一拦截导航完成时刻——因为用户真正“看到页面”是在 DOM 渲染完毕后，而 router.afterEach 正好满足这个时机。
用 afterEach 实现 PV 与基础页面信息上报
它在每次路由跳转完成、组件已挂载、DOM 已更新后执行，天然适配页面级埋点：
- 获取目标页完整路径：
to.fullPath、页面名称：to.name、查询参数：to.query - 记录来源页：
from.fullPath，可用于分析跳转漏斗或渠道转化 - 结合
to.meta预设字段（如{ title: '订单页', trackId: 'page_order' }），避免硬编码路径判断 - 直接调用埋点 SDK（如神策
sensors.track('page_view', {...})）或自定义上报函数
补充停留时长（TP）的计算逻辑
单靠 afterEach 只能拿到“进入时间”，需配合时间戳差值才能算出上一页停留时长：
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- 在首次进入时记录起始时间：
let startTime = Date.now() - 每次
afterEach触发时，用当前时间减去startTime得到上一页 TP - 更新
startTime = Date.now()，为下一次计算准备 - 过滤无效值：TP ≤ 500ms 的通常为误触或快速跳转，建议丢弃
为什么不用 onMounted？
组件级 onMounted 看似直观，但存在明显短板：
- 路由复用场景下（如 /user/1 → /user/2），组件不销毁重挂，
onMounted不会再次触发 - 需要每个页面组件都手动写，违背“统一管理、低侵入”原则
- 无法可靠获取来源页（
from）、无法自然衔接 TP 计算 - 若页面含异步数据加载，
onMounted执行时可能 DOM 尚未完全就绪（尤其含 Suspense 或异步组件）
配合 errorCaptured 做异常兜底
虽然不是页面访问主流程，但真实埋点系统需覆盖异常场景：
- 在根组件或 app 全局配置
errorCaptured钩子，捕获渲染错误 - 上报字段至少包含：
error.message、error.stack、当前路由route.path、时间戳 - 注意：该钩子不捕获异步错误（如
setTimeout中抛出的），需配合window.addEventListener('error')和unhandledrejection
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
