这两天在项目中有个新需求：在当前页面中的有很多数据，过滤数据的条件有时间，页码，类型，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 暂时写个公共方法来解决
在次测试时发现，只要我路由参数变化都会重新刷新整个页面（我只想重新请求数据），思考解决方法.....
二.优化方案
过程：为了达到我想要的效果，把路由变化的过程梳理一下。
- 需要全局的变量来存储query中的值（Vuex）
- 需要一个开关来控制是否刷新页面（Vuex）
- 初始化页面时将路由中的query下发到页面相对应的变量
- 页面参数变化是动态的改变路由 理清楚路由变化之后开始实现 *存储路由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.......
