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 相关文章推荐
给html超链接设置事件不使用href来完成跳
Apr 20 Javascript
JavaScript开发人员的10个关键习惯小结
Dec 05 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
Jul 15 Javascript
jQuery实现带有洗牌效果的动画分页实例
Aug 31 Javascript
JQuery中Ajax()的data参数类型实例分析
Dec 15 Javascript
jQuery通过ajax快速批量提交表单数据
Oct 25 Javascript
js实现右键菜单功能
Nov 28 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
Feb 13 Javascript
深入解析koa之中间件流程控制
Jun 17 Javascript
vue elementUI使用tabs与导航栏联动
Jun 21 Javascript
VUE+elementui面包屑实现动态路由详解
Nov 04 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
Apr 10 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/11/10 PHP
php+js实现的无刷新下载文件功能示例
2019/08/23 PHP
用jquery实现自定义风格的滑动条实现代码
2011/04/26 Javascript
jQuery中parents()和parent()的区别分析
2014/10/28 Javascript
js实现网页标题栏闪烁提示效果实例分析
2014/11/20 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
javascript生成随机数方法汇总
2015/11/12 Javascript
实例讲解jquery与json的结合
2016/01/07 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
2016/09/09 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
2016/09/14 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
2016/10/14 Javascript
js链表操作(实例讲解)
2017/08/29 Javascript
nodejs多版本管理总结
2018/04/03 NodeJs
vue.js中proxyTable 转发请求的实现方法
2018/09/20 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
js+canvas实现刮刮奖功能
2020/09/13 Javascript
浅析我对JS延迟异步脚本的思考
2020/10/12 Javascript
js实现简易计算器小功能
2020/11/18 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
python3 发送任意文件邮件的实例
2018/01/23 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
详解【python】str与json类型转换
2019/04/29 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
python解析xml文件方式(解析、更新、写入)
2020/03/05 Python
CAT鞋英国官网:坚固耐用的靴子和鞋
2016/10/21 全球购物
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
学校后勤人员职责
2013/12/27 职场文书
应聘编辑自荐信范文
2014/03/12 职场文书
绿色环保标语
2014/06/12 职场文书
做一个有道德的人活动方案
2014/08/25 职场文书
欠款证明
2015/06/24 职场文书
background-position百分比原理详解
2021/05/08 HTML / CSS
Mysql官方性能测试工具mysqlslap的使用简介
2021/05/21 MySQL
Django框架中模型的用法
2022/06/10 Python