Vue动态路由通过afterEach守卫结合meta字段可实现自动化PV埋点与停留时长统计——统一捕获跳转、读取trackId、记录时间戳、过滤异常值，并兼容嵌套及权限路由。
Vue 动态路由本身不直接提供埋点能力，但结合 全局后置守卫 afterEach 和 路由元信息（meta），就能实现页面访问埋点的自动化上报——无需在每个组件里写重复逻辑，也不依赖手动调用。
利用 afterEach 守卫统一捕获路由跳转
动态路由加载完成后，router.afterEach 会自动触发，此时 DOM 已更新、组件已挂载，是上报 PV（页面访问）最合适的时机：
- 它接收
to和from两个路由对象，可准确获取目标页路径、参数、来源页等关键字段 - 配合
to.meta.trackId或to.meta.pageType等预设字段，避免硬编码路径判断，适配所有动态路由（如/user/:id、/order/:orderId） - 刷新页面也会触发，确保首次进入和跳转都覆盖
在路由配置中声明埋点元数据
动态路由的 meta 字段是解耦埋点配置的关键。你可以在生成动态路由时，把埋点标识一并注入：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 后端返回菜单数据后，前端构造路由对象时，直接添加
meta: { trackId: 'page_user_detail', pageType: 'detail' } - 若使用
router.addRoute()动态添加，同样支持传入meta，例如：
router.addRoute({ path: '/user/:id', name: 'UserDetail', component: ..., meta: { trackId: 'user_detail' } }) - 这样，
afterEach中只需读取to.meta.trackId即可，无需解析path或params做字符串匹配
封装上报逻辑，支持 PV + 页面停留时长（TP）
单靠 afterEach 只能拿到“进入”时刻，要统计停留时长，需记录上一页的离开时间。常见做法是维护一个时间戳状态：
立即学习“前端免费学习笔记（深入）”；
- 定义变量
let lastEnterTime = Date.now()，在每次afterEach中计算差值：const TP = Date.now() - lastEnterTime - 上报当前页 PV 的同时，带上上一页的
TP（注意：首次进入无上一页，TP 跳过） - 为防误报，过滤掉
TP 的极短停留；也可结合 visibilitychange 监听页面是否被切走，提升准确性 - 推荐将上报函数抽离成独立模块（如
reportPageView(to, from, TP)），便于测试与复用
补充：兼容嵌套路由与权限级动态路由
如果动态路由含嵌套结构（如 /dashboard/user/list），或按角色过滤后生成的子路由，afterEach 同样生效：
- 它监听的是最终匹配的完整路由记录，无论该记录来自静态配置、
addRoute添加，还是children嵌套 - 只要路由对象存在且被导航到，
to.meta就可用，埋点逻辑无需修改 - 若某条动态路由未设置
meta，可 fallback 到默认值（如to.name || to.path），保证基础 PV 不丢
