路由守卫不直接检测版本更新，而是作为触发检查的时机入口，在路由跳转前发起版本比对并决定是否提示刷新；Vue用beforeRouteLeave，React用useLocation+useBlocker，逻辑统一抽离为hook或service，并优化提示体验。

路由守卫本身不直接检测版本更新，但它可以作为触发检查的“时机入口”——在用户即将跳转新路由前，主动发起版本比对，并根据结果决定是否提示刷新。这个方案轻量、可控、不侵入业务逻辑，特别适合 Vue 和 React 项目。

Vue 中用 beforeRouteLeave + 版本比对实现离开提示

适用于编辑态页面（如表单、文档），防止用户未保存就切走，同时顺带检查版本是否已更新：

• 在组件内定义 beforeRouteLeave 钩子，监听路由离开动作
• 离开前调用 checkVersion() 函数（例如请求 /version.json）
• 若检测到新版本，弹出确认框：“检测到新版本，是否刷新以获取最新功能？”
• 用户点“是”，执行 window.location.reload()；点“否”，调用 next(false) 阻止跳转

React 中用 Prompt + useLocation 监听路径变化

React Router v5/v6 均可适配，核心是把版本检查逻辑和路由守卫解耦，由状态驱动提示：

Skill Weave Chains — 技能链路由引擎

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

下载

• 用 useEffect + useLocation 监听 location.pathname 变化
• 每次变化时异步请求当前 version.json，与本地缓存 version 对比
• 若版本不一致，设置 showUpdatePrompt = true
• 配合自定义 Prompt 或 Modal 组件，在用户尝试跳转时展示提示
• 注意：v6 已移除 Prompt，可用 useBlocker（v6.7+）或封装 useBeforeUnload 替代

版本检测逻辑建议放在公共工具层

避免每个页面重复写请求和比对，统一抽成 hook 或 service：

• 首次加载时读取并缓存本地 version（可存在 localStorage 或全局变量）
• 检测函数返回 Promise，resolve true 表示有更新
• 支持配置检测频率（如仅在非首页、非登录页触发）、忽略路径（如 /login、/404 不检查）
• 失败时静默重试 1 次，避免网络抖动误判

提示体验优化要点

单纯弹窗容易打断操作，建议增强友好性：

• 提示文案明确说明影响：“新版本包含 XX 功能修复，刷新后生效”
• 提供“稍后提醒”选项，记录时间戳，15 分钟内不再提示
• 对 PWA 应用，可结合 serviceWorker.ready 实现后台静默更新
• 避免在 loading 状态或表单校验中途中断，加个防抖判断（如 !isSubmitting && !isSaving）