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加入收藏夹代码(兼容ie/ff/op)
May 16 Javascript
JavaScript 异常处理 详解
Feb 06 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
Nov 27 Javascript
javascript实现input file上传图片预览效果
Dec 31 Javascript
使用原生的javascript来实现轮播图
Feb 24 Javascript
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
JS基于正则表达式实现的密码强度验证功能示例
Sep 21 Javascript
Vue.js组件通信的几种姿势
Oct 23 Javascript
swiper 解决动态加载数据滑动失效的问题
Feb 26 Javascript
浅谈vue项目可以从哪些方面进行优化
May 05 Javascript
区别JavaScript函数声明与变量声明
Sep 12 Javascript
梳理一下vue中的生命周期
Dec 30 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通过session防url攻击方法
2014/12/10 PHP
windows7下php开发环境搭建图文教程
2015/01/06 PHP
php中使用key,value,current,next和prev函数遍历数组的方法
2015/03/17 PHP
实例简介PHP的一些高级面向对象编程的特性
2015/11/27 PHP
php结合md5实现的加密解密方法
2016/01/25 PHP
Yii2针对指定url的生成及图片等的引入方法小结
2016/07/18 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
javascript实现的鼠标链接提示效果生成器代码
2007/06/28 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
2013/04/18 Javascript
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
js控制表单操作的常用代码小结
2013/08/15 Javascript
jQuery $命名冲突解决方案汇总
2014/11/13 Javascript
Javascript模拟加速运动与减速运动代码分享
2014/12/11 Javascript
jQuery设置指定网页元素宽度和高度的方法
2015/03/25 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
EasyUI Tree树组件无限循环的解决方法
2017/09/27 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
2017/12/12 Javascript
vue项目部署到Apache服务器中遇到的问题解决
2018/08/24 Javascript
详解CommonJS和ES6模块循环加载处理的区别
2018/12/26 Javascript
详解基于webpack&gettext的前端多语言方案
2019/01/29 Javascript
vue 项目软键盘回车触发搜索事件
2020/09/09 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
2020/09/09 Javascript
[48:24]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第一场 12.09
2020/12/12 DOTA
使用Python的web.py框架实现类似Django的ORM查询的教程
2015/05/02 Python
在python3环境下的Django中使用MySQL数据库的实例
2017/08/29 Python
Django之创建引擎索引报错及解决详解
2019/07/17 Python
Python中pyecharts安装及安装失败的解决方法
2020/02/18 Python
selenium+python自动化78-autoit参数化与批量上传功能的实现
2021/03/04 Python
送给他或她的礼物:FUN.com
2018/08/17 全球购物
编程实现当输入某产品代码则打印出该产品记录的功能
2014/05/03 面试题
《石榴》教学反思
2014/03/02 职场文书
房屋租赁协议书范本
2014/04/10 职场文书
房屋产权证明书
2014/10/15 职场文书
经费申请报告
2015/05/15 职场文书
2016十一国庆节慰问信
2015/12/01 职场文书
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android