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 控制内容长度超出规定长度显示省略号
May 23 Javascript
jQuery+PHP实现动态数字展示特效
Mar 14 Javascript
jQuery实现可展开合拢的手风琴面板菜单
Sep 15 Javascript
Vue.js手风琴菜单组件开发实例
May 16 Javascript
用angular实现多选按钮的全选与反选实例代码
May 23 Javascript
Windows安装Node.js报错:2503、2502的解决方法
Oct 25 Javascript
微信小程序wx:for和wx:for-item的用法详解
Apr 01 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 Javascript
es6 super关键字的理解与应用实例分析
Feb 15 Javascript
详解使用mocha对webpack打包的项目进行"冒烟测试"的大致流程
Apr 27 Javascript
微信小程序入门之绘制时钟
Oct 22 Javascript
vue中配置scss全局变量的步骤
Dec 28 Vue.js
浅谈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
无数据库的详细域名查询程序PHP版(5)
2006/10/09 PHP
PHP关于IE下的iframe跨域导致session丢失问题解决方法
2013/10/10 PHP
php删除指定目录的方法
2015/04/03 PHP
CodeIgniter框架验证码类库文件与用法示例
2017/03/18 PHP
window.parent调用父框架时 ie跟火狐不兼容问题
2009/07/30 Javascript
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
node.js中的fs.createReadStream方法使用说明
2014/12/17 Javascript
bootstrap-treeview自定义双击事件实现方法
2016/01/09 Javascript
canvas 弹幕效果(实例分享)
2017/01/11 Javascript
js实现带三角符的手风琴效果
2017/03/01 Javascript
jquery平滑滚动到顶部插件使用详解
2017/05/08 jQuery
node thread.sleep实现示例
2018/06/20 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
2019/01/23 Javascript
vue 父组件中调用子组件函数的方法
2019/06/06 Javascript
微信小程序bindtap事件与冒泡阻止详解
2019/08/08 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
Layui Form 自定义验证的实例代码
2019/09/14 Javascript
基于javascript的无缝滚动动画实现2
2020/08/07 Javascript
Python中的作用域规则详解
2015/01/30 Python
全面解析Python的While循环语句的使用方法
2015/10/13 Python
利用python爬取软考试题之ip自动代理
2017/03/28 Python
Python实现爬取需要登录的网站完整示例
2017/08/19 Python
Python cookbook(数据结构与算法)实现查找两个字典相同点的方法
2018/02/18 Python
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
一篇文章彻底搞懂Python中可迭代(Iterable)、迭代器(Iterator)与生成器(Generator)的概念
2019/05/13 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
浅谈tensorflow 中tf.concat()的使用
2020/02/07 Python
python利用Excel读取和存储测试数据完成接口自动化教程
2020/04/30 Python
神经网络训练采用gpu设置的方式
2021/03/03 Python
阿拉伯书店:Jamalon
2019/07/24 全球购物
罗马尼亚在线杂货店:Pilulka.ro
2019/09/28 全球购物
大学生毕业自我鉴定
2013/11/06 职场文书
办公室人员先进事迹
2014/01/27 职场文书
个人年终总结怎么写
2015/03/09 职场文书
公司更名通知函
2015/04/24 职场文书
Redis性能监控的实现
2021/07/09 Redis