如何实现基于路由的“操作行为记录”与用户足迹追踪？守卫钩子应用-Vue.js-PHP中文网

基于路由守卫（beforeeach/aftereach）捕获导航行为，结合sessionstorage持久化状态，并通过组件钩子、事件监听和结构化上报实现全链路用户足迹追踪与精准行为分析。

如何实现基于路由的“操作行为记录”与用户足迹追踪？守卫钩子应用

实现基于路由的操作行为记录和用户足迹追踪，核心是利用路由守卫钩子捕获导航动作，并结合上下文补充精准行为语义。不需要侵入业务组件，也能覆盖大多数关键路径。

用 beforeEach 和 afterEach 搭配，构建最小可行的足迹链：

在 beforeEach 中保存目标页路径、时间戳（推荐 performance.now()）、来源页（from.path）和触发方式（如是否来自链接点击、编程式跳转等，可通过 router.currentRoute.value 对比判断）
在 afterEach 中上报本次导航：目标路径、停留时长（需配合上一次进入时间计算）、HTTP 状态（如是否 404）、是否首次访问该页等维度
避免跨 Tab 或刷新丢失，可将关键状态存入 sessionStorage，并在应用初始化时恢复

纯路由守卫无法捕获 Tab 切换、弹窗打开、折叠面板展开等操作。此时需下沉到组件层：

开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。

下载

在页面组件的 onMounted 中标记“可见开始”，在 onBeforeUnmount 中标记“可见结束”并计算真实停留时长
对 keep-alive 组件，监听 activated / deactivated 钩子，区分“激活态”与“缓存态”，只统计用户真正看到的时间
对关键交互节点（如按钮点击、表单提交），在事件回调中手动调用埋点函数，附带 route.path 和操作类型（如 click-submit）

真实场景下，原始导航日志噪声大，需主动过滤和兜底：

设置最小有效停留阈值（如 ≥800ms），排除误点、快速返回等无效行为
监听 beforeunload 事件，在页面关闭前强制补报最后一次停留时长，防止数据丢失
对非 Vue Router 跳转（如 <a href="/xxx"></a>、window.location.assign），通过 MutationObserver 监听 DOM 变化或重写原生方法做兼容
上报优先使用 sendBeacon，确保卸载阶段请求仍能发出；失败时可暂存至 localStorage，下次启动时重试

记录不是终点，关键是让数据可查、可关联：

每条记录携带唯一会话 ID（sessionId）和用户 ID（登录后补全），支持跨页行为串联
除路径外，记录查询参数脱敏后的 key 名（如 ?id=123 → query_id），便于聚合分析
将路由跳转、组件内操作、错误事件统一打平为“事件流”，按时间排序后可还原完整用户旅程
前端埋点字段建议至少包含：event_type（page_view / click / error）、path、duration、referrer、timestamp、session_id