Vue页面动态保存查询参数于地址栏，刷新仍可继续查询上一次查询的数据

前言

做条件查询时，有时候想保存当前查询的条件，以便刷新后直接按上一次查询的条件来查询数据。

借助webpack-merge实现动态保存查询条件

1：引入webpack-merge

  import merge from 'webpack-merge'        //用于动态修改地址栏参数的

2：每次请求完数据就更新查询条件

this.chanceUrlQuery({stationId:saveStationId,status})  //每次请求完数据将这次的请求参数保存在地址栏

//修改路由参数
chanceUrlQuery(data){
  //清空所有的参数：
  this.$router.push({
    query:merge({},{})
  })
  //更新路由参数,我的data为{stationId:'xx楼B区正门'，status:0}
  this.$router.push({
    query:merge(this.$route.query,data)
  })
},

结果图

第一次请求时，地址栏：

第二次请求时，地址栏：

解决遗留问题！

上述方法，虽然能实现该功能，但仅仅是这样的话，打开控制台发现会报错，虽然用户基本看不到，也不影响功能，但既然发现了那就要解决啦。

原因：在路由跳转的时候同一个路由多次添加是不被允许的

解决： 修改路由index文件：

import VueRouter from 'vue-router'
Vue.use(VueRouter)
const VueRouterPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (to) {
  return VueRouterPush.call(this, to).catch(err => err)
}