解决vue页面刷新或者后退参数丢失的问题(vue,刷新,页面,web开发)

时间:2024-05-02 03:20:59 作者 : 石家庄SEO 分类 : web开发
  • TAG :

    %E8%A7%A3%E5%86%B3vue%E9%A1%B5%E9%9D%A2%E5%88%B7%E6%96%B0%E6%88%96%E8%80%85%E5%90%8E%E9%80%80%E5%8F%82%E6%95%B0%E4%B8%A2%E5%A4%B1%E7%9A%84%E9%97%AE%E9%A2%98

在toB的项目中,会经常遇到列表数据筛选查询的情景,当要打开某一项的详情页或者暂时离开列表页,再返回(后退时),选择的筛选条件会全部丢失,辛辛苦苦选择好的条件全没了,还得重新选择,如果有分页的更头大,还得重新一页页翻到之前看到的那一页,用户体验极度不友好。

我的解决有两种:

第一种方法:用vue 的<keep-alive>,即在<router-view>外套一层<keep-alive>。

虽然可以达到一定效果,但是控制起来比较麻烦,比如项目中并不是所有页面都需要缓存,代码写起来复杂

第二种方法:直接用localStorage,简单粗暴(推荐)

代码如下:

list.vue

这种方法也受限于localStorage的局限性,不过可以通过使用cookie来弥补,具体不再详述。

以上这篇解决vue页面刷新或者后退参数丢失的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

本文:解决vue页面刷新或者后退参数丢失的问题的详细内容,希望对您有所帮助,信息来源于网络。
上一篇:解决vue单页使用keep-alive页面返回不刷新的问题下一篇:

2 人围观 / 0 条评论 ↓快速评论↓

(必须)

(必须,保密)

阿狸1 阿狸2 阿狸3 阿狸4 阿狸5 阿狸6 阿狸7 阿狸8 阿狸9 阿狸10 阿狸11 阿狸12 阿狸13 阿狸14 阿狸15 阿狸16 阿狸17 阿狸18