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

 更新时间:2018年03月13日 09:03:56   作者:panyox  
下面小编就为大家分享一篇解决vue页面刷新或者后退参数丢失的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

在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页面刷新或者后退参数丢失的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue中$router和$route的区别详解

    Vue中$router和$route的区别详解

    在 Vue.js 中,$router 和 $route 是两个常用的对象,用于处理路由相关的操作,下面小编就来和大家介绍一下$router 和 $route 的区别以及如何使用它们吧
    2023-06-06
  • element实现合并单元格通用方法

    element实现合并单元格通用方法

    这篇文章主要介绍了element实现合并单元格通用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • Vue.js 插件开发详解

    Vue.js 插件开发详解

    本文会通过一个简单的vue-toast插件,来帮助了解掌握插件的开发和使用。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-03-03
  • vue3中实现异步组件的方法实例

    vue3中实现异步组件的方法实例

    前端开发经常遇到异步的问题,请求函数、链接库等,下面这篇文章主要给大家介绍了关于vue3中实现异步组件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • Vue如何在CSS中使用data定义的数据浅析

    Vue如何在CSS中使用data定义的数据浅析

    这篇文章主要给大家介绍了关于Vue如何在CSS中使用data定义的数据的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下
    2022-05-05
  • vue3 element-plus二次封装组件系列之伸缩菜单制作

    vue3 element-plus二次封装组件系列之伸缩菜单制作

    这篇文章主要介绍了vue3 element-plus二次封装组件系列之伸缩菜单制作,是基于vue3 vite element-plus搭建的,值的注意的时候,里面的图标组件是经过处理的,结合实例代码介绍的非常详细,需要的朋友可以参考下
    2023-01-01
  • 解读vue生成的文件目录结构及说明

    解读vue生成的文件目录结构及说明

    本篇文章主要介绍了解读vue生成的文件目录结构及说明,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • 浅谈vue项目如何打包扔向服务器

    浅谈vue项目如何打包扔向服务器

    本篇文章主要介绍了浅谈vue项目如何打包扔向服务器,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • 分享Vue组件传值的几种常用方式(一)

    分享Vue组件传值的几种常用方式(一)

    这篇文章主要给大家分享的是Vue组件传值的几种常用方式,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的朋友可以参考一下
    2022-09-09
  • 简单聊聊vue3.0 sfc中setup的变化

    简单聊聊vue3.0 sfc中setup的变化

    这篇文章主要给大家介绍了关于vue3.0 sfc中setup变化的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2021-10-10

最新评论