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 相关文章推荐
JavaScript中void(0)的具体含义解释
Feb 27 Javascript
javascript编码的几个方法详细介绍
Jan 06 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
Jul 01 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 Javascript
node.js学习总结之调式代码的方法
Jun 25 Javascript
node.js入门教程之querystring模块的使用方法
Feb 27 Javascript
分析javascript中9 个常见错误阻碍你进步
Sep 18 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
Jan 09 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
Apr 19 Javascript
React-router4路由监听的实现
Aug 07 Javascript
解决layui 复选框等内置控件不显示的问题
Aug 14 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
Mar 17 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 7的一些引人注目的新特性简单介绍
2015/11/08 PHP
Javascript 布尔型分析
2008/12/22 Javascript
不同Jquery版本引发的问题解决
2013/10/14 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
2014/01/08 Javascript
使用jquery.validate自定义方法实现"手机号码或者固话至少填写一个"的逻辑验证
2014/09/01 Javascript
jQuery的bind()方法使用详解
2015/07/15 Javascript
JavaScript实现页面跳转的方式汇总
2016/05/16 Javascript
Vue数据驱动模拟实现4
2017/01/12 Javascript
jQuery实现淡入淡出的模态框
2017/02/09 Javascript
简单实现AngularJS轮播图效果
2020/04/10 Javascript
knockoutjs模板实现树形结构列表
2017/07/31 Javascript
浅谈Vue.js中的v-on(事件处理)
2017/09/05 Javascript
基于dataset的使用和图片延时加载的实现方法
2017/12/11 Javascript
使用FileReader API创建Vue文件阅读器组件
2018/04/03 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
2018/09/01 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
2018/09/04 Javascript
Vue项目环境搭建详细总结
2019/09/26 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
Nodejs技巧之Exceljs表格操作用法示例
2019/11/06 NodeJs
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
在vue中动态修改css其中一个属性值操作
2020/12/07 Vue.js
[03:49]显微镜下的DOTA2第十五期—VG登基之路完美团
2014/06/24 DOTA
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
django框架事务处理小结【ORM 事务及raw sql,customize sql 事务处理】
2019/06/27 Python
Python安装selenium包详细过程
2019/07/23 Python
解决jupyter运行pyqt代码内核重启的问题
2020/04/16 Python
IE浏览器单独写CSS样式的几种方法
2014/10/14 HTML / CSS
Qoo10台湾站:亚洲领先的在线市场
2018/05/15 全球购物
"引用"与指针的区别是什么
2016/09/07 面试题
教师专业理论水平的自我评价分享
2013/11/09 职场文书
乡镇网格化管理实施方案
2014/03/23 职场文书
护林防火标语
2014/06/27 职场文书
小学国庆节活动总结
2015/03/23 职场文书
2015年班组长工作总结
2015/04/10 职场文书
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js
关于JS中的作用域中的问题思考分享
2022/04/06 Javascript