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

原创 2018年04月15日 21:43:59

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

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

用 Java 保存位图文件

虽然 Java 提供了几种打开图像的机制,但保存图像并不是它的强项。这篇技巧将讲述如何将图像保存在 24 位位图文件中。另外,Jean-Pierre 还提供了将图像文件写入位图文件所需的全部代码。  ...
  • wxyxl
  • wxyxl
  • 2001-04-30 13:27:00
  • 1067

vue 页面跳转(兄弟组件)通过路由或vuex 进行传递参数,并且实现刷新数据不消失

用vue搭建整个前端页面,需要实现一个新闻列表的显示,当点击某一项新闻时,跳转到另外一个页面显示具体的新闻详情(这里没 有用到子路由)。两种传递参数的方式:(路由传递参数或者通过vuex) ...
  • wang1006008051
  • wang1006008051
  • 2017-09-08 20:01:16
  • 7643

vue路由跳转传参数

vue中路由跳转传参数有多种,自己常用的是下面的几种 通过router-link进行跳转 通过编程导航进行路由跳转 1. router-link...
  • wy01272454
  • wy01272454
  • 2017-09-06 17:46:53
  • 22555

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

这两天在项目中有个新需求:在当前页面中的有很多数据,过滤数据的条件有时间,页码,类型,id搜索….,假设我在页面中选择的某段时间,某个类型,现在我需要把握当前看到的信息完全展现给另一朋友。 serv...
  • pro_monkeyking
  • pro_monkeyking
  • 2018-04-15 21:43:59
  • 24

Vuex Demo 讲解

vuex官网的专业术语,让有些人还是感觉,摸不着头脑,做一些实用场景给大家看 https://juejin.im/post/58fffc52a22b9d0065b8db53 state 用...
  • sinat_17775997
  • sinat_17775997
  • 2017-09-22 08:47:20
  • 544

vue使用vue-router获取链接中传入参数

vue使用vue-router管理路由,跳转时传递参数
  • tjzc1352640
  • tjzc1352640
  • 2017-12-14 21:58:22
  • 584

使用Vue开发网站之路2-多组件通信2(利用Vuex进行数据传递)

这里还是非父子组件间的通信 其实我也不喜欢看别人的大段代码,但这是最完整的,以后肯定有用(完整代码贴在最后面,自己看) 主要实现是使用vuex的公共空间存放数据,这个时候要问,那为什么不之间用一个对...
  • m0_37819076
  • m0_37819076
  • 2017-04-26 18:53:23
  • 1101

vue 组件之间使用eventbus传值

eventbus vue vue-cli 组件传值
  • HUSHILIN001
  • HUSHILIN001
  • 2017-07-15 03:40:19
  • 6373

在vue中,路由传参以及获取

1、path: '/IndexDtaqInfo/:device_id'  ----路由定义 2、使用时获取id:this.$route.params.device_id...
  • weixin_39845746
  • weixin_39845746
  • 2018-01-04 12:54:12
  • 219

vuex

写在前面 ​ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 使用Vue开发项目时,通...
  • ligang2585116
  • ligang2585116
  • 2018-01-03 18:51:06
  • 336
收藏助手
不良信息举报
您举报文章:Vue项目中路由动态传参功能相关实现
举报原因:
原因补充:

(最多只允许输入30个字)