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 不丢

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！