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 相关文章推荐
js检测客户端不是firefox则提示下载
Apr 07 Javascript
指定位置如果有图片显示图片,无图片显示广告的JS
Jun 05 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
May 08 Javascript
jquery实现公告翻滚效果
Feb 27 Javascript
jQuery使用animate创建动画用法实例
Aug 07 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
Sep 09 Javascript
ES6新特性之模块Module用法详解
Apr 01 Javascript
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
form表单序列化详解(推荐)
Aug 15 Javascript
js断点调试经验分享
Dec 08 Javascript
webpack 开发和生产并行设置的方法
Nov 08 Javascript
vue学习笔记之slot插槽用法实例分析
Feb 29 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.ini-dist 和 php.ini-recommended 的区别介绍(方便开发与安全的朋友)
2012/07/01 PHP
php在项目中寻找代码的坏味道(综艺命名)
2012/07/19 PHP
windows服务器中检测PHP SSL是否开启以及开启SSL的方法
2014/04/25 PHP
php常用文件操作函数汇总
2014/11/22 PHP
ThinkPHP模型详解
2015/07/27 PHP
JavaScript建立一个语法高亮输入框实现思路
2013/02/26 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
2013/04/02 Javascript
JS模拟自动点击的简单实例
2013/08/08 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
2014/02/20 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
2014/06/10 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
2015/03/17 Javascript
jquery处理页面弹出层查询数据等待操作实例
2015/03/25 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
2015/11/16 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
2015/12/04 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
2016/09/16 Javascript
Javascript从数组中随机取出不同元素的两种方法
2016/09/22 Javascript
Bootstrap基本组件学习笔记之分页(12)
2016/12/08 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
2017/12/24 Javascript
详解NODEJS的http实现
2018/01/04 NodeJs
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
2018/07/04 Javascript
linux下安装easy_install的方法
2013/02/10 Python
python开发之thread线程基础实例入门
2015/11/11 Python
django2用iframe标签完成网页内嵌播放b站视频功能
2018/06/20 Python
Flask之flask-script模块使用
2018/07/26 Python
为什么Python中没有"a++"这种写法
2018/11/27 Python
python3文件复制、延迟文件复制任务的实现方法
2019/09/02 Python
numpy中三维数组中加入元素后的位置详解
2019/11/28 Python
jupyter notebook插入本地图片的实现
2020/04/13 Python
详解Python利用configparser对配置文件进行读写操作
2020/11/03 Python
Nip + Fab官网:英国美容品牌
2019/08/26 全球购物
工程现场管理求职自荐信
2013/10/02 职场文书
商务考察邀请函范文
2014/01/21 职场文书
药品业务员岗位职责
2014/04/17 职场文书
nginx 防盗链防爬虫配置详解
2021/03/31 Servers
Django路由层如何获取正确的url
2021/07/15 Python
win11高清晰音频管理器在哪里?win11找不到高清晰音频管理器解决办法
2022/04/08 数码科技