element UI 分步表单,使用 v-show 来控制表单显示,第二步之后的页面刷新,回到第一步,如何避免?

Question

问题描述

使用 element UI 的步骤条编写的分步表单,使用 v-show 控制表单的显示, 在第一步之后,刷新页面,会回到第一步. 我希望在第几步刷新,就停留在第几步.

demo

codepen代码复现

Answer 1

那肯定要把当前的 step 信息保存下来，最简单的就路由绑定一个query 参数来记录当前处于哪个 step，step 递增递减可通过路由 replace 变化。

Answer 2

状态存localstorageme每次进入页面取一下 当前会话有效的也可存sessionStoreage

Answer 3

这种需求刷新的时候确实有点坑，你如果需要刷新维持状态，你就需要在每次上一步下一步的时候把数据保存到本地，而且需要保存当前的step值，进入页面的时候取一下，最后提交以后必须把本地数据清掉。

Answer 4

1.在vue中使用sessionStoreage 缓存当前切换标示，在moutend中判断当前表示的状态，切换到对于到值
2.也可用vuex 当刷新时也会丢失数据，一般也是结合缓存使用，vuex使用更方便

Answer 5

1. 首先，在真实的需求中是不会出现这种情况的，因为每一步的表单都会提交给服务端，服务端也会返回给你到哪一步的状态；
2. 然后，你根据服务端返回给你的状态去控制前端表单的显示；
3. 即使再次刷新页面，浏览器还是会向服务端发起请求，请求目前的状态；
4. 这样的需求肯定是不能把状态保存在本地，假如换个浏览器，难道要让用户重新提交表单不成