Java自学者论坛

 找回密码
 立即注册

手机号码,快捷登录

恭喜Java自学者论坛(https://www.javazxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,会员资料板块,购买链接:点击进入购买VIP会员

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程Go语言视频零基础入门到精通Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程SpringBoot2.X入门到高级使用教程大数据培训第六期全套视频教程深度学习(CNN RNN GAN)算法原理Java亿级流量电商系统视频教程
互联网架构师视频教程年薪50万Spark2.0从入门到精通年薪50万!人工智能学习路线教程年薪50万大数据入门到精通学习路线年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程MySQL入门到精通教程
查看: 58974|回复: 0

解决vue页面刷新或者后退参数丢失的问题

[复制链接]
  • TA的每日心情
    奋斗
    7 天前
  • 签到天数: 745 天

    [LV.9]以坛为家II

    2041

    主题

    2099

    帖子

    70万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    704660
    发表于 2021-4-7 08:51:18 | 显示全部楼层 |阅读模式

    原文链接: 点我

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

    解决方法有两种:

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

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

    方法直接用localStorage,简单粗暴(推荐)

    代码如下:

    list.vue

    export default {
        data () {
          return {
            searchForm:{
              project_name:'',
              status:'',
              city:'',
              round:'',
              fund:'',
              charge:'',
              page: 1
            },
          },
          beforeRouteLeave(to, from, next){
          //打开详情页(或者下一个任意界面)之前,把筛选条件保存到localStorage,如果离开列表页并且打开的不是详情页则清除,也可以选择不清除
          if (to.name == 'Detail') {
            let condition = JSON.stringify(this.searchForm)
            localStorage.setItem('condition', condition)
          }else{
            localStorage.removeItem('condition')
          }
          next()
        },
        created(){
          //从localStorage中读取条件并赋值给查询表单
          let condition = localStorage.getItem('condition')
          if (condition != null) {
           this.searchForm = JSON.parse(condition)
          }
          this.$http.get('http://example.com/api/test', {params: this.searchForm})
          .then((response)=>{
            console.log(response.data)
          }).catch((error)=>{
            console.log(error)
          })
        }
      }
    }

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

    哎...今天够累的,签到来了1...
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|小黑屋|Java自学者论坛 ( 声明:本站文章及资料整理自互联网,用于Java自学者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2024-3-29 08:31 , Processed in 0.062278 second(s), 29 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表