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 相关文章推荐
Jjcarousellite 实现图片列表滚动的简单实例
Nov 29 Javascript
jQuery实现简单的日期输入格式化控件
Mar 12 Javascript
js实现鼠标经过表格行变色的方法
May 12 Javascript
jQuery CSS3相结合实现时钟插件
Jan 08 Javascript
Jquery zTree 树控件异步加载操作
Feb 25 Javascript
详解javascript跨浏览器事件处理程序
Mar 27 Javascript
解决koa2 ctx.render is not a function报错问题
Aug 07 Javascript
AngularJS 事件发布机制
Aug 28 Javascript
详解原生JS回到顶部
Mar 25 Javascript
深入解析koa之中间件流程控制
Jun 17 Javascript
vue data引入本地图片的两种方式小结
Nov 13 Javascript
JavaScript中如何调用Java方法
Sep 16 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
40年前的这部特摄片恐龙特级克塞号80后的共同回忆
2020/03/08 日漫
基于php上传图片重命名的6种解决方法的详细介绍
2013/04/28 PHP
解析php时间戳与日期的转换
2013/06/06 PHP
php获取文件名后缀常用方法小结
2015/02/24 PHP
php实现向javascript传递数组的方法
2015/07/27 PHP
thinkPHP框架整合tcpdf插件操作示例
2018/08/07 PHP
PHP连接MySQL数据库操作代码实例解析
2020/07/11 PHP
JQuery 获取和设置Select选项的代码
2010/02/07 Javascript
jQuery学习基础知识小结
2010/11/25 Javascript
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
轻松创建nodejs服务器(9):实现非阻塞操作
2014/12/18 NodeJs
对JavaScript客户端应用编程的一些建议
2015/06/24 Javascript
jquery实现左右无缝轮播图
2020/07/31 Javascript
angular.js分页代码的实例
2016/07/27 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
微信小程序 开发指南详解
2016/09/27 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
2017/03/02 Javascript
微信小程序 侧滑删除(左滑删除)
2017/05/23 Javascript
vue 计时器组件的实现代码
2017/09/14 Javascript
vue中使用localstorage来存储页面信息
2017/11/04 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
2018/11/22 Javascript
js实现简易计算器功能
2019/10/18 Javascript
[01:28]一分钟告诉你DOTA2 TI9不朽宝藏Ⅱ中有什么!
2019/07/09 DOTA
Python实现嵌套列表及字典并按某一元素去重复功能示例
2017/11/30 Python
Django Celery异步任务队列的实现
2019/07/24 Python
Python实现隐马尔可夫模型的前向后向算法的示例代码
2019/12/31 Python
Pytorch中.new()的作用详解
2020/02/18 Python
python中matplotlib实现随鼠标滑动自动标注代码
2020/04/23 Python
python switch 实现多分支选择功能
2020/12/21 Python
html5使用Drag事件编辑器拖拽上传图片的示例代码
2017/08/22 HTML / CSS
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
澳大利亚最好的在线时尚精品店:Princess Polly
2018/01/03 全球购物
应届毕业生个人求职信范文
2014/01/29 职场文书
硕士生工作推荐信
2014/03/07 职场文书
《美丽的丹顶鹤》教学反思
2014/04/22 职场文书
2016年感恩母亲节活动总结
2016/04/01 职场文书