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


Posted in Javascript onMarch 13, 2018

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

我的解决有两种:

第一种方法:用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来弥补,具体不再详述。

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

Javascript 相关文章推荐
Javascript模板技术
Apr 27 Javascript
javascript贪吃蛇完整版(源码)
Dec 09 Javascript
最佳的JavaScript错误处理实践
Jul 16 Javascript
JavaScript实现解析INI文件内容的方法
Nov 17 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
Jan 18 Javascript
全面总结Javascript对数组对象的各种操作
Jan 22 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
Mar 20 Javascript
JS实现的合并多个数组去重算法示例
Apr 11 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
Aug 20 Javascript
angularjs http与后台交互的实现示例
Dec 21 Javascript
React性能优化系列之减少props改变的实现方法
Jan 17 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
May 13 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
Mar 13 #Javascript
解决vue 路由变化页面数据不刷新的问题
Mar 13 #Javascript
一种angular的方法级的缓存注解(装饰器)
Mar 13 #Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
Mar 12 #Javascript
解决vue多个路由共用一个页面的问题
Mar 12 #Javascript
angular5 httpclient的示例实战
Mar 12 #Javascript
vue 简单自动补全的输入框的示例
Mar 12 #Javascript
You might like
Zend Studio去除编辑器的语法警告设置方法
2012/10/24 PHP
php提示Warning:mysql_fetch_array() expects的解决方法
2014/12/16 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
js 函数的副作用分析
2011/08/23 Javascript
jQuery1.6 使用方法一
2011/11/23 Javascript
jquery实现div阴影效果示例代码
2013/09/16 Javascript
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
JavaScript截断字符串的方法
2015/07/15 Javascript
JS实现类似51job上的地区选择效果示例
2016/11/17 Javascript
JS检测数组类型的方法小结
2017/03/14 Javascript
weex slider实现滑动底部导航功能
2017/08/28 Javascript
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
vue移动端监听滚动条高度的实现方法
2018/09/03 Javascript
jQuery实现的分页插件完整示例
2020/05/26 jQuery
Python数据分析中Groupby用法之通过字典或Series进行分组的实例
2017/12/08 Python
基于python的多进程共享变量正确打开方式
2018/04/28 Python
Python离线安装PIL 模块的方法
2019/01/08 Python
python 实现图片旋转 上下左右 180度旋转的示例
2019/01/24 Python
python两个_多个字典合并相加的实例代码
2019/12/26 Python
CSS3感应鼠标的背景闪烁和图片缩放动画效果
2014/05/14 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
2016/04/26 HTML / CSS
印度尼西亚在线时尚购物网站:ZALORA印尼
2016/08/02 全球购物
香港交友网站:be2香港
2018/07/22 全球购物
英国快时尚女装购物网站:PrettyLittleThing
2018/08/15 全球购物
说出你对remoting 和webservice的理解和应用
2014/06/08 面试题
承诺书的格式范文
2014/03/28 职场文书
《谁的本领大》教后反思
2014/04/25 职场文书
社区党建工作方案
2014/06/10 职场文书
大学生第一学年自我鉴定2015
2014/09/28 职场文书
生死抉择观后感
2015/06/09 职场文书
2015年暑期见闻
2015/07/14 职场文书
Nginx的反向代理实例详解
2021/03/31 Servers
python 破解加密zip文件的密码
2021/04/22 Python
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL
Python列表的索引与切片
2022/04/07 Python