vue router 传参获取不到的解决方式


Posted in Javascript onNovember 13, 2019

在当前路由中有一个toArticle方法可以跳转到article页面

methods:{
   toArticle:function(index) {
   this.$router.push({path:'/article',params:this.blogList[index]});
  }
 }

在article中接受不到params

mounted(){
   console.log(this.$route.params)
   //这里输出undifined
  }

导致这样的原因是因为params需要通过name来获取,这里就要明白query和params的区别了

query要用path来引入,接收参数都是this.$route.query.name。query类似于ajax中get传参,即在浏览器地址栏中显示参数。

params要用name来引入,接收参数都是this.$route.params.name。params则类似于post,即在浏览器地址栏中不显示参数。

所以以上带面做下面这样的修改就可以获取数据:

methods:{
   toArticle:function(index) {
   this.$router.push({name:'article',params:this.blogList[index]});
  }
 }

以上这篇vue router 传参获取不到的解决方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
Feb 04 Javascript
Javascript 遮罩层和加载效果代码
Aug 01 Javascript
js实现的点击数量加一可操作数据库
May 09 Javascript
jQuery对象初始化的传参方式
Feb 26 Javascript
全面解析Bootstrap表单使用方法(表单样式)
Nov 24 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 Javascript
微信小程序 教程之wxapp视图容器 swiper
Oct 19 Javascript
js运动事件函数详解
Oct 21 Javascript
在html中引入外部js文件,并调用带参函数的方法
Oct 31 Javascript
JS实现的缓冲运动效果示例
Apr 30 Javascript
vue如何根据网站路由判断页面主题色详解
Nov 02 Javascript
vue 虚拟DOM的原理
Oct 03 Javascript
Vue解析带html标签的字符串为dom的实例
Nov 13 #Javascript
vue props对象validator自定义函数实例
Nov 13 #Javascript
微信小程序获取当前位置和城市名
Nov 13 #Javascript
使用Promise封装小程序wx.request的实现方法
Nov 13 #Javascript
微信小程序wx.request的简单封装
Nov 13 #Javascript
vue使用prop可以渲染但是打印台报错的解决方式
Nov 13 #Javascript
highcharts.js数据绑定方式代码实例
Nov 13 #Javascript
You might like
php+memcache实现的网站在线人数统计代码
2014/07/04 PHP
PHP中的output_buffering详细介绍
2014/09/27 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
php反射学习之依赖注入示例
2019/06/14 PHP
javascript Demo模态窗口
2009/12/06 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
2015/10/10 Javascript
jQuery移动web开发中的页面初始化与加载事件
2015/12/03 Javascript
js 动态给元素添加、移除事件的实现方法
2016/07/19 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
2016/11/07 Javascript
基于vue2.0动态组件及render详解
2018/03/17 Javascript
微信小程序开发之左右分栏效果的实例代码
2019/05/20 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
2019/09/10 Javascript
vue+koa2搭建mock数据环境的详细教程
2020/05/18 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
2020/07/21 Javascript
js实现拖拽元素选择和删除
2020/08/25 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队LGD晋级之路
2018/04/07 DOTA
Python while、for、生成器、列表推导等语句的执行效率测试
2015/06/03 Python
Windows下python2.7.8安装图文教程
2016/05/26 Python
在Python的Flask中使用WTForms表单框架的基础教程
2016/06/07 Python
Python实现求笛卡尔乘积的方法
2017/09/16 Python
matplotlib subplots 设置总图的标题方法
2018/05/25 Python
对numpy中数组转置的求解以及向量内积计算方法
2018/10/31 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
Python3 chardet模块查看编码格式的例子
2019/08/14 Python
将python2.7添加进64位系统的注册表方式
2019/11/20 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
利用css3实现的简单的鼠标悬停按钮
2014/11/04 HTML / CSS
Bally巴利中国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/10/09 全球购物
应届生的求职推荐信范文
2013/11/30 职场文书
学生会竞聘书范文
2014/03/31 职场文书
营销部内勤岗位职责
2014/04/30 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
2016年社区文体活动总结
2016/04/06 职场文书
python基础详解之if循环语句
2021/04/24 Python
JS中一些高效的魔法运算符总结
2021/05/06 Javascript