路由跳转前用浅拷贝保存表单快照，仅复制一层属性，适用于简单表单数据，不处理嵌套对象、DOM节点、函数及Symbol属性，推荐展开运算符{...formData}，需在离开钩子中执行并存至localStorage或Pinia。
在路由跳转前用浅拷贝保存表单页面的原始快照，核心是**只复制表单数据对象的一层属性，不深递归处理嵌套结构**，适合简单表单（如纯字符串、数字、布尔值字段），且需注意 DOM 元素和函数不能被拷贝。
明确哪些数据需要快照
通常只需保存用户输入的字段值，例如：
-
表单状态对象：如
{ name: "张三", age: 25, isActive: true } -
不包含 DOM 引用：不要试图拷贝
document.getElementById("name")这类节点 - 不包含方法或 Symbol 属性：浅拷贝会忽略函数、Symbol 键、不可枚举属性
常用浅拷贝方式（选一种即可）
以下方法都只复制第一层，性能轻量，适合跳转前快速存档：
-
展开运算符（推荐）：
const snapshot = { ...formData }; -
Object.assign()：
const snapshot = Object.assign({}, formData); -
Array.from()（仅限数组）：
const snapshot = Array.from(arr);或[...arr]
⚠️ 注意：如果 formData 含嵌套对象（如 { profile: { city: "北京" } }），其 profile 引用仍被共享，修改 snapshot.profile.city 会影响原对象 —— 这正是“浅”的含义，也是你接受的前提。
立即学习“Java免费学习笔记（深入）”；
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
结合路由跳转时机保存（以 Vue Router 为例）
在组件内监听即将离开的钩子，执行拷贝并暂存：
- Vue 2：
beforeRouteLeave(to, from, next) - Vue 3 Composition API：
onBeforeRouteLeave((to, from, next) => { ... }) - React Router：
useNavigate()前手动调用，或配合useBlocker（v6.8+）
示例（Vue 3）：
import { onBeforeRouteLeave } from 'vue-router'
onBeforeRouteLeave((to, from, next) => {
// 假设 formState 是响应式对象，取其原始值
const rawForm = unref(formState) // 或 formState.value（依你定义方式）
const snapshot = { ...rawForm }
// 存到 localStorage / pinia / 或父组件 ref 中
sessionStorage.setItem('formSnapshot', JSON.stringify(snapshot))
next()
})
后续如何使用这个快照
跳转回来时（比如点击浏览器返回、或导航回该页），可从存储中读取并还原：
- 用
JSON.parse()恢复为普通对象（注意：会丢失 Date、RegExp 等类型） - 若需保留特殊类型，改用
structuredClone()（现代浏览器支持，但属于深拷贝） - 更稳妥的做法：把快照存在内存（如 Pinia store 的 state 字段），避免序列化损耗
不复杂但容易忽略：确保拷贝发生在用户真正触发跳转时（比如点击「下一步」按钮），而不是在 watch 表单变化时频繁保存 —— 浅拷贝虽快，滥用仍可能影响体验。
