防丢失的关键是分离路由语义与业务状态，用持久化+标识化代替传参：url仅承载语义化id（如/order/88927），目标页通过id调用api拉取数据；辅以pinia预存、sessionstorage暂存或路由守卫防护。
路由跳转时数据丢失，本质是状态没“落盘”或没“带过去”。真正防丢失不是靠拦截跳转，而是让关键数据在跳转前后始终可访问——核心思路是：**分离路由语义与业务状态，用持久化+标识化代替直接传参**。
用动态路由参数 + 后端接口兜底
这是最健壮、最符合 Web 本质的方案。URL 只承载语义化标识（如 /order/88927），不塞任何对象或复杂结构。
- 配置路由时明确使用命名参数：
{ path: '/order/:id', component: OrderDetail } - 目标页通过
useRoute().params.id获取 ID，立即调用fetchOrder(id)拉取完整数据 - 即使用户刷新、分享链接、从书签打开，只要 ID 有效，页面就能正确加载
- 配合
<keepalive></keepalive>缓存已渲染页，避免重复请求（非必需但体验更顺）
预存状态 + 路由标识关联
适合跳转来源可控、且目标页无需实时最新数据的场景（如列表页点进详情页）。
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
- 点击跳转前，把对象存入 Pinia/Vuex 或
ref()响应式状态中：store.setTempOrder(order) - 跳转只传唯一 ID：
router.push(`/order/${order.id}`) - 详情页 onMounted 时，用 ID 查找预存对象；查不到再 fallback 到 API 请求
- 优势是零网络延迟，缺点是需自行管理缓存生命周期（比如用户多次跳转后旧数据要清理）
sessionStorage 暂存轻量对象（慎用）
仅适用于临时、非敏感、结构简单、且跨刷新必须保留的数据（如表单草稿、筛选条件）。
- 跳转前序列化写入：
sessionStorage.setItem('draftForm', JSON.stringify(form)) - 目标页读取后立刻清除：
const draft = JSON.parse(sessionStorage.getItem('draftForm') || '{}'); sessionStorage.removeItem('draftForm'); - 注意：不要存 token、密码、用户身份证等敏感字段；不适用于大对象（有大小限制）；隐私模式下可能失效
配合路由守卫做退出防护（补位逻辑）
以上方案解决“跳转后怎么找回”，而这个解决“还没跳转时怎么不丢”——防止用户误操作离开。
- 设置全局标志
isUnsaved = true（例如表单修改后置为 true） - 在
router.beforeEach中检查：若isUnsaved且目标路由非白名单（如 /success /error），弹出确认提示 - 用户点击“放弃”后再设
isUnsaved = false并放行；点击“继续编辑”则阻止跳转 - 这不防刷新，但能拦住侧边栏点击、地址栏输入、标签页切换等常见误触
