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 仿QQ校友的DIV模拟窗口效果源码
Mar 24 Javascript
JQuery跨Iframe选择实现代码
Aug 19 Javascript
快速解决jQuery与其他库冲突的方法介绍
Jan 02 Javascript
学习jQuey中的return false
Dec 18 Javascript
基于canvas实现的绚丽圆圈效果完整实例
Jan 26 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 Javascript
详解基于webpack和vue.js搭建开发环境
Apr 05 Javascript
react实现菜单权限控制的方法
Dec 11 Javascript
vue 1.0 结合animate.css定义动画效果
Jul 11 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
Aug 13 Javascript
js隐式转换的知识实例讲解
Sep 28 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
May 10 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
精致的人儿就要挑杯子喝咖啡
2021/03/03 冲泡冲煮
PHP学习资料汇总与网址
2007/03/16 PHP
用PHP实现维护文件代码
2007/06/14 PHP
PHP 处理图片的类实现代码
2009/10/23 PHP
深入理解JavaScript系列(12) 变量对象(Variable Object)
2012/01/16 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
2014/06/02 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
2015/12/03 Javascript
jQuery无刷新上传之uploadify3.1简单使用
2016/06/18 Javascript
JS数组去掉重复数据只保留一条的实现代码
2016/08/11 Javascript
移动适配的几种方案(三种方案)
2016/11/25 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
EasyUI为Numberbox添加blur事件的方法
2017/03/05 Javascript
JavaScript实现反转字符串的方法详解
2017/04/27 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
JS实现简单日历特效
2020/01/03 Javascript
JavaScript构造函数原理及实现流程解析
2020/11/19 Javascript
webpack4从0搭建组件库的实现
2020/11/29 Javascript
Python中比较特别的除法运算和幂运算介绍
2015/04/05 Python
python实现向微信用户发送每日一句 python实现微信聊天机器人
2019/03/27 Python
Python提取特定时间段内数据的方法实例
2019/04/01 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
获取CSDN文章内容并转换为markdown文本的python
2020/09/06 Python
python给list排序的简单方法
2020/12/10 Python
用HTML5.0制作网页的教程
2010/05/30 HTML / CSS
美国购买新书和二手书网站:Better World Books
2018/10/31 全球购物
定制iPhone和Macbook保护壳:Slick Case
2018/11/21 全球购物
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
如何在Oracle中查看各个表、表空间占用空间的大小
2015/10/31 面试题
简述DNS进行域名解析的过程
2013/12/02 面试题
车间机修工岗位职责
2014/02/28 职场文书
人事部岗位职责范本
2014/03/05 职场文书
幼儿园家长寄语
2014/04/02 职场文书
幼儿园开学报名通知
2015/07/16 职场文书
浅谈Python 中的复数问题
2021/05/19 Python
Python sklearn分类决策树方法详解
2022/09/23 Python