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

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

全局守卫记录基础导航流

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

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

组件级钩子补全“非路由切换”行为

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

Skill Weave Chains — 技能链路由引擎

开箱即用的技能链路由引擎。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">、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