前端多组件页面跳转返回上一级时如何保留已填写的输入数据？

以下是三种可直接落地的实现方案，你可以根据自己的技术栈选型：

方案1：公共状态托管（通用性最高） #

• 把4个步骤的所有表单字段统一存储在所有步骤组件的公共父级状态中，也可以使用框架自带的全局状态管理能力：Vue生态用Pinia/Vuex，React生态用Context API/Redux，小程序/uni-app生态用globalData/Pinia
• 每个步骤组件内的表单输入变化时，实时将当前步骤的表单数据同步更新到公共状态中；组件初始化挂载时，直接从公共状态读取对应步骤的已有值作为表单默认值回填
• 该方案不依赖路由特性，所有前端技术栈都可适配，也支持刷新页面后仍保留数据（如果搭配持久化存储）

方案2：临时存储+路由传参 #

• 点击下一步按钮跳转时，将当前步骤的表单数据序列化后通过路由参数传递给下一个组件；返回上一步时，同样将全量的已填写数据通过路由参数回传
• 如果路由参数有长度限制，可将全量表单数据临时存入sessionStorage，所有步骤提交完成后主动清空对应存储的内容；每个步骤组件挂载时优先从sessionStorage中读取对应字段的值回填表单
• 注意：敏感数据不要存入localStorage，避免用户关闭页面后数据残留泄露

方案3：组件缓存（改造成本最低） #

• 如果你的技术栈支持路由/组件缓存，可以直接开启4个步骤页面的缓存配置：Vue生态用<keep-alive>包裹路由出口，React生态用第三方<KeepAlive>组件，小程序直接在页面配置中开启keepAlive: true
• 开启缓存后，组件切换时不会被销毁，表单内输入的内容会自然保留，不需要额外做数据同步逻辑，适合不需要持久化存储（用户刷新页面允许清空数据）的场景

补充注意：如果表单有前置校验逻辑，建议在公共存储中同时保存每个步骤的校验结果，切换步骤时不需要重复校验已通过的步骤，可提升操作效率

内容的提问来源于stack exchange，提问作者Surya Prakash