在项目中有遇到这种情况,从a页面进入b页面编辑后,从b页面进入c页面,再从c页面返回我们希望b页面依旧保存我们填好的信息,不要刷新,但是再从别的页面进入b页面也不能一直保存b页面的编辑内容。根据这种情况讨论方案:

1、组件引用传参方式
这种情况适合参数较少要保存内容少的情况,例如在一个表单页面,的查看协议或者合同,这时把合同或者协议做成组件展示,会是操作方便且代码简洁许多。

2、vuex https://vuex.vuejs.org/zh/
首先说明,不要为了使用 vuex 而使用,而是与其他方式相比,只有 vuex 是最方便的时候在使用。如果使用 vuex 需要引入并且添加store中的方法代码【各js相互引入,抛出,定义等】还需要在组件中有修改值得地方commit。10个参数,使用 vuex 相对来说代码量比较大且操作繁琐。

3、session
代码量和 vuex 不相上下,而且存储session其实和暴露明文是一样的,一些信息会暴露出去。

4、KeepAlive https://cn.vuejs.org/v2/api/#keep-alive
Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染 DOM

KeepAlive简单使用方法:
在 route 的 index.js 中标识需要缓存的页面
页面需要缓存处理情况
用 keepAlive 包裹 router-view
页面需要缓存处理情况

在 router-view 外面包裹了 keepalive,在表单页面使用,来回切换页面,切回来上次的操作的确被记录了。但是有个问题,因为编辑页、注册页等是通过路由跳转,当我们编辑了某条数据,返回列表页时,因为被缓存列表页展示的数据并没有被更新过来,只有刷新下才能更新过来。所以此时需要用到keepAlive属性activated 声明周期内重新调用获取需要更新的方法。具体实践要根据项目来定,参考官方文档给出的说明。
keep-alive生命周期钩子函数:activated、deactivated
使用会将数据保留在内存中,如果要在每次进入页面的时候获取最新的数据,需要在activated阶段获取数据,承担原来created钩子中获取数据的任务。

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2021-12-06
  • 2022-12-23
  • 2018-01-27
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2021-09-14
  • 2022-12-23
  • 2021-12-05
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案