解决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(一)工厂方式 js面象对象的定义方法
Dec 15 Javascript
网页中CDATA标记的说明
Sep 12 Javascript
node.js中的fs.chownSync方法使用说明
Dec 16 Javascript
mongoose中利用populate处理嵌套的方法
May 26 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
Sep 21 Javascript
vue组件父子间通信详解(三)
Nov 07 Javascript
详解javascript常用工具类的封装
Jan 30 Javascript
vue.js学习笔记之v-bind和v-on解析
May 03 Javascript
前后端如何实现登录token拦截校验详解
Sep 03 Javascript
JavaScript变量提升和严格模式实例分析
Jan 27 Javascript
JavaScript实现背景自动切换小案例
Sep 27 Javascript
vue 实现超长文本截取,悬浮框提示
Jul 29 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
使用PHP生成二维码的两种方法(带logo图像)
2014/03/14 PHP
PHP中抽象类、接口的区别与选择分析
2016/03/29 PHP
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
Javascript处理DOM元素事件实现代码
2012/05/23 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
初识Node.js
2015/03/20 Javascript
JavaScript获得页面base标签中url的方法
2015/04/03 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
AngularJS 日期格式化详解
2015/12/23 Javascript
JavaScript动态创建div等元素实例讲解
2016/01/06 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
JS实现复选框的全选和批量删除功能
2017/04/05 Javascript
JavaScript创建、读取和删除cookie
2019/09/03 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
2020/03/09 Javascript
Vue项目打包编译优化方案
2020/09/16 Javascript
Python实时获取cmd的输出
2015/12/13 Python
批处理与python代码混合编程的方法
2016/05/19 Python
举例讲解Python中字典的合并值相加与异或对比
2016/06/04 Python
轻松理解Python 中的 descriptor
2017/09/15 Python
python自动化报告的输出用例详解
2018/05/30 Python
Python实现的简单读写csv文件操作示例
2018/07/12 Python
使用Python获取并处理IP的类型及格式方法
2018/11/01 Python
使用Python pip怎么升级pip
2020/08/11 Python
让IE6、IE7、IE8支持CSS3的脚本
2010/07/20 HTML / CSS
服装设计专业自荐书范文
2013/12/30 职场文书
大学毕业生自荐书怎么写?
2014/01/06 职场文书
《列夫托尔斯泰》教学反思
2014/02/10 职场文书
推荐信模板
2014/05/09 职场文书
事业单位鉴定材料
2014/05/25 职场文书
经典团队口号
2014/06/06 职场文书
乔布斯辞职信(中英文对照)
2015/05/12 职场文书
优秀员工演讲稿
2019/06/21 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书
创业计划书之酒店
2019/08/30 职场文书
Spring mvc是如何实现与数据库的前后端的连接操作的?
2021/06/30 Java/Android
python中mongodb包操作数据库
2022/04/19 Python