详解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判断页面加载状态以及添加遮罩和缓冲动画的代码
Oct 11 Javascript
Jquery getJSON方法详细分析
Dec 26 Javascript
Jquery 实现弹出层插件
Jan 28 Javascript
详解JavaScript逻辑Not运算符
Dec 04 Javascript
全面解析Javascript无限添加QQ好友原理
Jun 15 Javascript
AngularJS 面试题集锦
Sep 06 Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 Javascript
php 修改密码实现代码
May 24 Javascript
浅谈JavaScript 代码整洁之道
Oct 23 Javascript
JavaScript中reduce()的5个基本用法示例
Jul 19 Javascript
了不起的11个JavaScript代码重构最佳实践小结
Jan 11 Javascript
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
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 使用html5实现多文件上传实例
2016/10/24 PHP
PHP 返回数组后处理方法(开户成功后弹窗提示)
2017/07/03 PHP
PHP错误处理函数register_shutdown_function使用示例
2017/07/03 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
PHP基于openssl实现非对称加密代码实例
2020/06/19 PHP
一些常用的JS功能函数(2009-06-04更新)
2009/06/04 Javascript
JQuery 学习笔记 选择器之四
2009/07/23 Javascript
JS 文件传参及处理技巧分析
2010/05/13 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
2013/11/22 Javascript
JavaScript Sort 的一个错误用法示例
2015/03/20 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
2016/09/04 Javascript
js数组操作方法总结(必看篇)
2016/11/22 Javascript
nodejs中使用HTTP分块响应和定时器示例代码
2017/03/19 NodeJs
基于Bootstrap的标签页组件及bootstrap-tab使用说明
2017/07/25 Javascript
JavaScript实现微信号随机切换代码
2018/03/09 Javascript
React 使用browserHistory项目访问404问题解决
2018/06/01 Javascript
vue中Axios的封装与API接口的管理详解
2018/08/09 Javascript
vue观察模式浅析
2018/09/25 Javascript
使用vue实现各类弹出框组件
2019/07/03 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
[47:26]完美世界DOTA2联赛 LBZS vs Forest 第二场 11.07
2020/11/09 DOTA
python中set()函数简介及实例解析
2018/01/09 Python
Numpy array数据的增、删、改、查实例
2018/06/04 Python
Python如何使用Gitlab API实现批量的合并分支
2019/11/27 Python
Python GUI库PyQt5样式QSS子控件介绍
2020/02/25 Python
印度购物网站:TATA CLiQ
2017/11/23 全球购物
Nisbets爱尔兰:英国最大的厨房和餐饮设备供应商
2019/01/26 全球购物
彪马英国官网:PUMA英国
2019/02/11 全球购物
社区工作者思想汇报
2014/01/13 职场文书
服务承诺书范文
2014/05/19 职场文书
民政局标准版离婚协议书
2014/12/01 职场文书
论文答辩开场白大全
2015/05/27 职场文书
生产设备维护保养制度
2015/08/06 职场文书
SQL Server数据定义——模式与基本表操作
2021/04/05 SQL Server
redis客户端实现高可用读写分离的方式详解
2021/07/04 Redis