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 相关文章推荐
firefox中用javascript实现鼠标位置的定位
Jun 17 Javascript
doctype后如何获得body.clientHeight的方法
Jul 11 Javascript
Three.js源码阅读笔记(光照部分)
Dec 27 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
Apr 19 Javascript
jQuery焦点图轮播特效代码分享(3款)
Sep 05 Javascript
js下将金额数字每三位一逗号分隔
Feb 19 Javascript
jQuery使用正则表达式限制文本框只能输入数字
Jun 18 Javascript
JavaScript中Number对象的toFixed() 方法详解
Sep 02 Javascript
JS时间控制实现动态效果的实例讲解
Jul 31 Javascript
vue实现axios图片上传功能
Aug 20 Javascript
vue项目使用.env文件配置全局环境变量的方法
Oct 24 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
Jun 05 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
基于mysql的bbs设计(三)
2006/10/09 PHP
php 在文件指定行插入数据的代码
2010/05/08 PHP
学习php设计模式 php实现适配器模式
2015/12/07 PHP
PHP实现的DES加密解密实例代码
2016/04/06 PHP
php实现图片上传、剪切功能
2016/05/07 PHP
使一个函数作为另外一个函数的参数来运行的javascript代码
2007/08/13 Javascript
javascript forEach通用循环遍历方法
2010/10/11 Javascript
简约JS日历控件 实例代码
2013/07/12 Javascript
关于Jquery操作Cookie取值错误的解决方法
2013/08/26 Javascript
jquery实现图片按比例缩放示例
2014/07/01 Javascript
JS使用for循环遍历Table的所有单元格内容
2014/08/21 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
2015/12/08 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
9个让JavaScript调试更简单的Console命令
2016/11/14 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
2016/12/27 Javascript
jQuery extend()详解及简单实例
2017/05/06 jQuery
Vue的生命周期操作示例
2019/09/17 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
Vue 数据绑定的原理分析
2020/11/16 Javascript
Python多继承顺序实例分析
2018/05/26 Python
Python操作MySQL数据库的方法
2018/06/20 Python
python把1变成01的步骤总结
2019/02/27 Python
jupyter notebook 中输出pyecharts图实例
2020/04/23 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
Django中的DateTimeField和DateField实现
2021/02/24 Python
详解html5 shiv.js和respond.min.js
2018/01/24 HTML / CSS
四方通行旅游网:台湾订房、出国旅游
2017/09/20 全球购物
公司投资建议书
2014/05/16 职场文书
爱国口号
2014/06/19 职场文书
党的群众路线教育实践活动先进个人材料
2014/12/24 职场文书
监考失职检讨书
2015/01/26 职场文书
幼儿园中班班级总结
2015/08/10 职场文书
浅谈Redis缓冲区机制
2022/06/05 Redis