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 相关文章推荐
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
Jul 11 Javascript
javascript 写类方式之四
Jul 05 Javascript
一个cssQuery对象 javascript脚本实现代码
Jul 21 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
Apr 12 Javascript
深入理解Javascript中this的作用域
Aug 12 Javascript
jQuery实现html元素拖拽
Jul 21 Javascript
js实现的tab标签切换效果代码分享
Aug 25 Javascript
angularjs表格分页功能详解
Jan 21 Javascript
mockjs+vue页面直接展示数据的方法
Dec 19 Javascript
详解如何快速配置webpack多入口脚手架
Dec 28 Javascript
JavaScript小技巧带你提升你的代码技能
Sep 15 Javascript
JS实现刷新网页后之前浏览位置保持不变示例详解
Aug 14 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的返回引用和局部静态变量
2015/06/04 PHP
详解WordPress开发中get_header()获取头部函数的用法
2016/01/08 PHP
Windows下php+mysql5.7配置教程
2017/05/16 PHP
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
2007/12/23 Javascript
jQuery select的操作实现代码
2009/05/06 Javascript
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
2012/12/07 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
2015/08/06 Javascript
AngularJs  E2E Testing 详解
2016/09/02 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
2017/01/04 Javascript
JS实现的表头列头固定页面功能示例
2017/01/10 Javascript
vue购物车插件编写代码
2017/11/27 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
2018/01/16 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
2018/04/10 Javascript
angularJs中ng-model-options设置数据同步的方法
2018/09/30 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
2019/04/14 Javascript
python中使用pyhook实现键盘监控的例子
2014/07/18 Python
Python使用正则匹配实现抓图代码分享
2015/04/02 Python
python编写弹球游戏的实现代码
2018/03/12 Python
python os用法总结
2018/06/08 Python
python实现滑雪者小游戏
2020/02/22 Python
django实现后台显示媒体文件
2020/04/07 Python
Debenhams爱尔兰:英国知名的百货公司
2017/01/02 全球购物
int *p=NULL和*p= NULL有什么区别
2014/10/23 面试题
母亲七十大寿答谢词
2014/01/18 职场文书
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
小学生寒假家长评语
2014/04/16 职场文书
二年级评语大全
2014/04/23 职场文书
销售行政专员岗位职责
2014/06/10 职场文书
德育标兵事迹材料
2014/08/24 职场文书
乡镇挂职心得体会
2014/09/04 职场文书
幼儿园感恩节活动方案
2014/10/06 职场文书
2015欢度元旦标语口号
2014/12/09 职场文书
英文导游词
2015/02/13 职场文书
2015年春训学习心得体会范文
2015/03/09 职场文书
2015年食品安全工作总结
2015/05/15 职场文书