vue.js this.$router.push获取不到params参数问题


Posted in Javascript onMarch 03, 2020

主要通过两种方式传参

1.query方式传参和接受参数

this.$router.push({
 path:'/xxx'
 query:{
  idname:id
  }
})

接收的方式:this.$route.query.id

2.params方式传递参数

this.$router.push({
 name:'路径名称'
 query:{
  idname:id
  }
})

接收的方式:this.$route.params.id

代码

this.$router.push({
 path: '/container',
 params: {
  url: this.func.url,
 },
 });

在跳转后的页面中console.log(this.route)发现params是空的

问题原因:用法错误,以下为正确用法

this.$router.push({
 name: 'container',
 params: {
  url: this.func.url,
 },
 });

要使跳转后的页面this.$route.params有参数,必须使用name:'container',而不是path:'/container',还需要注意name中没有/

this.$router.push({
 name: 'container',
 params: {
  url: this.func.url,
 },
 });

参数获取this.$route.params.url

this.$router.push({
 path: '/container',
 query: {
  url: this.func.url,
 },
 });

这种方式会在跳转的地址上拼接上?url=xxxx
获取方式this.$route.query.url

导致这样的原因是因为params需要通过name来获取,这里就要明白query和params的区别了

  • query要用path来引入,接收参数都是this.$route.query.name。query类似于ajax中get传参,即在浏览器地址栏中显示参数。
  • params要用name来引入,接收参数都是this.$route.params.name。params则类似于post,即在浏览器地址栏中不显示参数。

注意区别两种方式,切勿path和name同时出现

到此这篇关于vue.js this.$router.push获取不到params参数问题的文章就介绍到这了,更多相关this.$router.push获取参数内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
情人节之礼 js项链效果
Feb 13 Javascript
JS 数字转换研究总结
Dec 26 Javascript
改变状态栏文字的js代码
Jun 13 Javascript
JQuery动态添加和删除表格行的方法
Mar 09 Javascript
JS显示表格内指定行html代码的方法
Mar 31 Javascript
如何利用JQuery实现从底部回到顶部的功能
Dec 27 Javascript
JavaScript实现的select点菜功能示例
Jan 16 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
Feb 14 Javascript
Vue生命周期示例详解
Apr 12 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
Sep 10 Javascript
vue-cli3项目展示本地Markdown文件的方法
Jun 07 Javascript
vue使用canvas实现移动端手写签名
Sep 22 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
Mar 03 #Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
Mar 03 #Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
Mar 03 #Javascript
vue中改变滚动条样式的方法
Mar 03 #Javascript
vue倒计时刷新页面不会从头开始的解决方法
Mar 03 #Javascript
vuex(vue状态管理)的特殊应用案例分享
Mar 03 #Javascript
使用vue打包进行云服务器上传的问题
Mar 02 #Javascript
You might like
PHP经典实用正则表达式小结
2017/05/04 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
PHP+Ajax实现的博客文章添加类别功能示例
2018/03/29 PHP
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
jQuery的实现原理的模拟代码 -3 事件处理
2010/08/03 Javascript
不同的jQuery API来处理不同的浏览器事件
2012/12/09 Javascript
js拦截alert对话框另类应用
2013/01/16 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
2013/07/16 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
2015/04/16 Javascript
JS实现的论坛Ajax打分效果完整实例
2015/10/31 Javascript
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
详解如何用模块化的方式写vuejs
2017/12/16 Javascript
vue 指令之气泡提示效果的实现代码
2018/10/18 Javascript
Vue编程式跳转的实例代码详解
2019/07/10 Javascript
JS跨浏览器解析XML应用过程详解
2020/10/16 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
[46:40]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[01:32]完美世界DOTA2联赛10月29日精彩集锦
2020/10/30 DOTA
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
简介二分查找算法与相关的Python实现示例
2015/08/26 Python
python 中文件输入输出及os模块对文件系统的操作方法
2018/08/27 Python
Python爬虫基础之XPath语法与lxml库的用法详解
2018/09/13 Python
selenium+python自动化测试之鼠标和键盘事件
2019/01/23 Python
python SocketServer源码深入解读
2019/09/17 Python
django中的图片验证码功能
2019/09/18 Python
Python3离线安装Requests模块问题
2019/10/13 Python
利用Python绘制Jazz网络图的例子
2019/11/21 Python
Python如何通过Flask-Mail发送电子邮件
2020/01/29 Python
Python实现石头剪刀布游戏
2021/01/20 Python
澳洲的服装老品牌:SABA
2018/02/06 全球购物
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
优质的学校老师推荐信
2013/10/28 职场文书
秘书专业自荐信范文
2013/12/26 职场文书
企业申诉管理制度
2014/01/30 职场文书
小学教师教学反思
2016/02/24 职场文书
如何理解及使用Python闭包
2021/06/01 Python