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 相关文章推荐
学习面向对象之面向对象的基本概念:对象和其他基本要素
Nov 30 Javascript
jQuery中setTimeout的几种使用方法小结
Apr 07 Javascript
JavaScript 学习笔记之操作符
Jan 14 Javascript
使用命令对象代替switch语句的写法示例
Feb 28 Javascript
AngularJS基础学习笔记之控制器
May 10 Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 Javascript
jQuery 判断是否包含在数组中Array[]的方法
Aug 03 Javascript
JavaScript模块化之使用requireJS按需加载
Apr 12 Javascript
解决vue中虚拟dom,无法实时更新的问题
Sep 15 Javascript
Vue.js 中的实用工具方法【推荐】
Jul 04 Javascript
Vue实现点击显示不同图片的效果
Aug 10 Javascript
vue前端工程的搭建
Mar 31 Vue.js
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 函数中使用static的说明
2012/06/01 PHP
mcrypt启用 加密以及解密过程详细解析
2013/08/07 PHP
Linux服务器下PHPMailer发送邮件失败的问题解决
2017/03/04 PHP
传递参数的标准方法(jQuery.ajax)
2008/11/19 Javascript
js+CSS 图片等比缩小并垂直居中实现代码
2008/12/01 Javascript
Jquery乱码的一次解决过程 图解教程
2010/02/20 Javascript
jquery ajax执行后台方法
2010/03/18 Javascript
图片轮换效果实现代码(点击按钮停止执行)
2013/04/12 Javascript
解析window.open的使用方法总结
2013/06/19 Javascript
jquery中文乱码的多种解决方法
2013/06/21 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
2017/09/06 Javascript
Vue组件之全局组件与局部组件的使用详解
2017/10/09 Javascript
关于JavaScript语句后面的分号问题
2017/12/07 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
2018/01/16 Javascript
vue2单元测试环境搭建
2018/05/24 Javascript
详解将微信小程序接口Promise化并使用async函数
2019/08/05 Javascript
javascript 内存模型实例详解
2020/04/18 Javascript
在nodejs中创建child process的方法
2021/01/26 NodeJs
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
Django中实现一个高性能计数器(Counter)实例
2014/07/09 Python
scrapy自定义pipeline类实现将采集数据保存到mongodb的方法
2015/04/16 Python
django项目搭建与Session使用详解
2018/10/10 Python
pandas ix &iloc &loc的区别
2019/01/10 Python
Python利用WMI实现ping命令的例子
2019/08/14 Python
Ubuntu20下的Django安装的方法步骤
2021/01/24 Python
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
运动会开幕式邀请函
2014/01/22 职场文书
带病坚持工作事迹
2014/05/03 职场文书
公司联欢会策划方案
2014/05/19 职场文书
2014年网管工作总结
2014/12/11 职场文书
2014年小学辅导员工作总结
2014/12/23 职场文书
财务总监岗位职责范本
2015/04/03 职场文书
2016年先进班集体事迹材料
2016/02/26 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS