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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/pro_monkeyking/article/details/79953755

这两天在项目中有个新需求:在当前页面中的有很多数据,过滤数据的条件有时间,页码,类型,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…….

阅读更多

没有更多推荐了,返回首页