详解Vue中一种简易路由传参办法


Posted in Javascript onSeptember 15, 2017

情景模拟:

A页面中,有一些div是根据A中的book数据通过v-for生成的,比如item。

并且点击会根据路由跳转到B页面。

而跳转到B页面后,我需要A中的item。

<div v-for="(item,index) in book" :class='{on:$route.path === `/${item.to}/`}' @click='toOther(item.to)'>
 </div>
toOther(to,run) {
  if(this.$route.path!==`/${to}`){
   location.hash = to;
  }
},

解决办法:

在A中的click事件中将item传进toOther()函数中,再根据路由传入

toOther(to,run) {
   if(this.$route.path!==`/${to}`){
    location.hash = to+'?'+run.key;
   }
  },

即将要传的参数添加在原本url加?之后,这样既不影响路由,也比较方便。

如图1所示:

详解Vue中一种简易路由传参办法

详解Vue中一种简易路由传参办法

如图2,这样子我们便可以在 this.$route 的fullPath中拿到A中我们需要传递的参数了。

具体要拿还需要进行字符串的分割取出所需的信息,但是这样子会很繁琐,我们只需多加几个字,

在你的参数前加上'sth'=

toOther(to,run) {
   if(this.$route.path!==`/${to}`){
    location.hash = to+'?'+'book_key='+run.key;
   }
  },

你就会发现你可以在query中拿到这些个数据

并且是一个object的形式

简直不能更完美!

详解Vue中一种简易路由传参办法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js实现的页面关键字密度查询代码
Dec 27 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
Dec 26 Javascript
用JS实现3D球状标签云示例代码
Dec 01 Javascript
JavaScript中的this机制
Jan 30 Javascript
jQuery实现自动输入email、时间和域名的方法
Aug 24 Javascript
浅谈webpack 自动刷新与解析
Apr 09 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
Aug 12 Javascript
详解微信小程序之一键复制到剪切板
Apr 24 Javascript
ES6基础之字符串和函数的拓展详解
Aug 22 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
Sep 21 Javascript
Vue 列表页带参数进详情页的操作(router-link)
Nov 13 Javascript
iview实现动态表单和自定义验证时间段重叠
Jan 10 Javascript
JavaScript实现换肤功能
Sep 15 #Javascript
jQuery实现火车票买票城市选择切换功能
Sep 15 #jQuery
详解Vue.js Mixins 混入使用
Sep 15 #Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
Sep 15 #Javascript
Node.js实现连接mysql数据库功能示例
Sep 15 #Javascript
vue实现登陆登出的实现示例
Sep 15 #Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
Sep 15 #Javascript
You might like
PHP安装攻略:常见问题解答(二)
2006/10/09 PHP
网络资源
2006/10/09 PHP
php时间不正确的解决方法
2008/04/09 PHP
浅析PHP中call user func()函数及如何使用call user func调用自定义函数
2015/11/05 PHP
php删除数组中重复元素的方法
2015/12/22 PHP
Extjs4中的分页应用结合前后台
2013/12/13 Javascript
jquery显示隐藏input对象
2014/07/21 Javascript
点击button获取text内容并改变样式的js实现
2014/09/09 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
window.open()实现post传递参数
2015/03/12 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
vue router-link传参以及参数的使用实例
2017/11/10 Javascript
vue2.0 实现导航守卫(路由守卫)
2018/05/21 Javascript
基于javascript的无缝滚动动画1
2020/08/07 Javascript
javascript实现时钟动画
2020/12/03 Javascript
[02:17]TI4西雅图DOTA2前线报道 啸天mik夫妻档解说
2014/07/08 DOTA
教大家使用Python SqlAlchemy
2016/02/12 Python
Python实现线性插值和三次样条插值的示例代码
2019/11/13 Python
python 解决cv2绘制中文乱码问题
2019/12/23 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
移动web模拟客户端实现多方框输入密码效果【附代码】
2016/03/25 HTML / CSS
详解HTML5中表单验证的8种方法介绍
2016/12/19 HTML / CSS
西班牙太阳镜品牌:Hawkers
2018/03/11 全球购物
The Body Shop美体小铺西班牙官网:天然化妆品
2019/06/21 全球购物
寻找迷宫的一条出路,o通路;X:障碍
2016/07/10 面试题
鞋类设计与工艺专业销售求职信
2013/11/01 职场文书
决定成败的关键——创业计划书
2014/01/24 职场文书
《维生素c的故事》教学反思
2014/02/18 职场文书
学生上课看漫画的检讨书
2014/09/26 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书
2016年暑假家长对孩子评语
2015/12/01 职场文书
python 实现图与图之间的间距调整subplots_adjust
2021/05/21 Python
解析Java中的static关键字
2021/06/14 Java/Android
Python中使用ipython的详细教程
2021/06/22 Python
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript