Vue项目中路由动态传参功能相关实现

这两天在项目中有个新需求：在当前页面中的有很多数据，过滤数据的条件有时间，页码，类型，id搜索….，假设我在页面中选择的某段时间，某个类型，现在我需要把握当前看到的信息完全展现给另一朋友。
server端环境：时间和页码可以动态的传递到后端

一. 初步解决方案

刚看此需求首先想到的是vue—router的动态传参，于是就开始码代码。将过滤条件相关的变量动态的传说路由中

  this.$router.push({query:{date:..,page:..}})

首次进入页面时，取出路由中的query参数

this.$route.query

整体思路就是这样，测试发现个严重的问题，
1.页面刷新的问题，在浏览中手动更改query时页面不会刷新（vue路由问题，下面会说到）
查阅官方文档发现文档中有此段话：记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫。
2.项目是单页面，组件之间传值（同级组件）是非常大问题，我需要在每个页面中写一遍代码（不能忍）

---

问题1按照官方给出的方式解决：

watch:{
"$route":function(val,oldVal){
...
location.reload()
...
}
}

路由刷新问题搞定

---

问题2 暂时写个公共方法来解决

---

在次测试时发现，只要我路由参数变化都会重新刷新整个页面（我只想重新请求数据），思考解决方法…..

二.优化方案

过程：为了达到我想要的效果，把路由变化的过程梳理一下。

1. 需要全局的变量来存储query中的值（Vuex）
2. 需要一个开关来控制是否刷新页面（Vuex）
3. 初始化页面时将路由中的query下发到页面相对应的变量
4. 页面参数变化是动态的改变路由
   理清楚路由变化之后开始实现
   *存储路由query和控制是否刷新页面的值都用Vuex来实现

new Vuex.Store({
    state:{
     //控制页面刷新
     isRefresh: true,
      //存储路由中query的值
     queryParams:{}
      },
    mutations: {
    test (state) {
      // 变更状态
      state.queryParams = {
      id:"test"
      }
          },
    test2(state) {
      state.isRefresh = "test"
   }
  }
  })

初始化页面时将路由中的query下发到页面用公共方法**

//obj传入当前页面的data即（this.$data确保query中参数key都是data的属性值）
//queryParams传入当前页面路由的query值

Vue.prototype.$initData=function(obj,queryParams){

     //使用双重循环给this.$data中的属性赋值
}

页面参数变化是动态的改变路由写个公共方法给路由赋值就行了

三 总结

---

这个功能的实现是我对vue有了更加深入的了解，vue能从众多的前端框架中脱颖而出跟他与时俱进的开发理念，以及前端项目中的各种相关生态的良好支持有着很大的关系。之前刚接触vue时，就被他前端项目的一键部署以及通俗易懂的开发文档深深的吸引。越是深入了解他的本质，就越发的觉得vue设计思想的wonderful…….