vue中路由参数传递可能会遇到的坑


Posted in Javascript onDecember 07, 2017

前言

vue中路由跳转传参数有多种,自己常用的是下面的几种

  • 通过router-link进行跳转
  • 通过编程导航进行路由跳转

本文主要给大家介绍了关于vue路由参数传递遇到的一些坑,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。

首先我的路由的定义

{
 path: '/b',
 name: 'B',
 component: resolve => require(['../pages/B.vue'], resolve)
}

我从A组件跳转到B组件,并通过路由信息对象传递一些参数

this.$router.push({
 path: '/b',
 params: {
  paramA: 'a' 
 },
 query:{
  paramB: 'b'
 }
})

在B组件中获取参数

this.$route.query.paramB  //b
this.$route.params.paramA //undefined

通过路由的params对象传递过来的参数paramB始终是undefined,始终找不到原因。通过查阅资料,终于找到原因,那是因为路由的params对象使用,必须要通过路由名来调用路由,而不同通过path来调用,而query对象则没有这个要求。

所以我们修改下代码:

this.$router.push({
 name: 'B',
 params: {
  paramA: 'a' 
 },
 query:{
  paramB: 'b'
 }
})

将path参数换成对应的路由名称就可以了,这个时候获取参数就一切正常了。

this.$route.query.paramB  //b
this.$route.params.paramA //a

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jQuery UI AutoComplete 使用说明
Jun 20 Javascript
JS 日期比较大小的简单实例
Jan 13 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
Jan 28 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
Oct 08 Javascript
三个js循环的关键字示例(for与while)
Feb 16 Javascript
jquery UI Datepicker时间控件冲突问题解决
Dec 16 Javascript
angular十大常见问题
Mar 07 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
Nov 12 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
Jan 22 Javascript
详解javascript void(0)
Jul 13 Javascript
详解TS数字分隔符和更严格的类属性检查
May 06 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
Dec 07 #Javascript
面包屑导航详解
Dec 07 #Javascript
谈谈JS中的!!
Dec 07 #Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
Dec 07 #Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
Dec 07 #Javascript
jquery学习笔记之无new构建详解
Dec 07 #jQuery
利用Node.js检测端口是否被占用的方法
Dec 07 #Javascript
You might like
一个显示天气预报的程序
2006/10/09 PHP
解析PHP中如何将数组变量写入文件
2013/06/06 PHP
codeigniter自带数据库类使用方法说明
2014/03/25 PHP
PHP对文件进行加锁、解锁实例
2015/01/23 PHP
JS获取浏览器版本及名称实现函数
2013/04/02 Javascript
js变换显示图片的实例
2013/04/16 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
2015/07/05 Javascript
Angular2从搭建环境到开发步骤详解
2016/10/17 Javascript
jQuery与js实现颜色渐变的方法
2016/12/30 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
2017/08/29 jQuery
two.js之实现动画效果示例
2017/11/06 Javascript
jQuery+CSS实现的table表格行列转置功能示例
2018/01/08 jQuery
Vue实现PopupWindow组件详解
2018/04/28 Javascript
微信小程序网络请求封装示例
2018/07/24 Javascript
vue加载完成后的回调函数方法
2018/09/07 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
2019/06/15 Javascript
vue设置动态请求地址的例子
2019/11/01 Javascript
微信小程序 scroll-view的使用案例代码详解
2020/06/11 Javascript
[00:36]DOTA2风云人物相约完美“圣”典 12月17日不见不散
2016/11/30 DOTA
[01:07:34]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第二场 1月9日
2021/03/11 DOTA
使用Pyrex来扩展和加速Python程序的教程
2015/04/13 Python
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
python生成器,可迭代对象,迭代器区别和联系
2018/02/04 Python
Python读写zip压缩文件的方法
2018/08/29 Python
在python中利用numpy求解多项式以及多项式拟合的方法
2019/07/03 Python
flask/django 动态查询表结构相同表名不同数据的Model实现方法
2019/08/29 Python
Python解释器以及PyCharm的安装教程图文详解
2020/02/26 Python
Python 中Operator模块的使用
2021/01/30 Python
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
高性能钓鱼服装:Huk Gear
2019/02/20 全球购物
P D PAOLA法国官网:西班牙著名的珠宝首饰品牌
2020/02/15 全球购物
Oracle的内存结构(Memory structures)
2015/06/10 面试题
体育之星事迹材料
2014/05/11 职场文书
好的促销活动方案
2014/08/21 职场文书
《孙子兵法》:欲成大事者,需读懂这些致胜策略
2019/08/23 职场文书
Python测试框架pytest核心库pluggy详解
2022/08/05 Golang