详解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 相关文章推荐
jquery获取input表单值的代码
Apr 19 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
Nov 12 Javascript
JS 实现列表与多选框选择附预览动画
Oct 29 Javascript
jQuery选择id属性带有点符号元素的方法
Mar 17 Javascript
React Native 通告消息竖向轮播组件的封装
Aug 25 Javascript
Bootstrap实现翻页效果
Nov 27 Javascript
Angular-UI Bootstrap组件实现警报功能
Jul 16 Javascript
傻瓜式vuex语法糖kiss-vuex整理
Dec 21 Javascript
javascript 函数的暂停和恢复实例详解
Apr 25 Javascript
JavaScript监听键盘事件代码实现
Jun 03 Javascript
Webpack的Loader和Plugin的区别
Nov 09 Javascript
JavaScript原型链详解
Nov 07 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字符编码问题之GB2312 VS UTF-8解决方法
2011/06/23 PHP
利用php实现禁用IE和火狐的缓存问题
2012/12/03 PHP
用PHP来计算某个目录大小的方法
2014/04/01 PHP
php判断当前用户已在别处登录的方法
2015/01/06 PHP
Laravel5.1 框架控制器基础用法实例分析
2020/01/04 PHP
利用javascript实现一些常用软件的下载导航
2009/08/03 Javascript
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
2011/10/22 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
2013/03/06 Javascript
JavaScript实现复制功能各浏览器支持情况实测
2013/07/18 Javascript
window.returnValue使用方法示例介绍
2014/07/03 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
2015/04/03 Javascript
JS+Canvas 实现下雨下雪效果
2016/05/18 Javascript
JS异步文件上传(兼容IE8+)
2017/04/02 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
2017/04/21 jQuery
JS中offset和匀速动画详解
2018/02/06 Javascript
React 使用Hooks简化受控组件的状态绑定
2019/03/18 Javascript
8个有意思的JavaScript面试题
2019/07/30 Javascript
微信小程序纯文本实现@功能
2020/04/08 Javascript
python 计算数组中每个数字出现多少次--“Bucket”桶的思想
2017/12/19 Python
Python基于辗转相除法求解最大公约数的方法示例
2018/04/04 Python
Pycharm配置PyQt5环境的教程
2020/04/02 Python
在CentOS7下安装Python3教程解析
2020/07/09 Python
Python脚本打包成可执行文件过程解析
2020/10/20 Python
celery在python爬虫中定时操作实例讲解
2020/11/27 Python
scrapy头部修改的方法详解
2020/12/06 Python
简单聊聊H5的pushState与replaceState的用法
2018/04/03 HTML / CSS
HTML5中Localstorage的使用教程
2015/07/09 HTML / CSS
static函数与普通函数有什么区别
2015/12/25 面试题
关于Java finally的面试题
2016/04/27 面试题
煤矿班组长岗位职责
2013/12/29 职场文书
测绘专业大学生职业生涯规划书
2014/02/10 职场文书
地球一小时宣传标语
2014/06/24 职场文书
Ajax实现异步加载数据
2021/11/17 Javascript
SQL SERVER触发器详解
2022/02/24 SQL Server
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技
全网非常详细的pytest配置文件
2022/07/15 Python