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 相关文章推荐
JS遮罩层效果 兼容ie firefox jQuery遮罩层
Jul 26 Javascript
JS Replace 全部替换字符的用法小结
Dec 24 Javascript
轻松5句话解决JavaScript的作用域
Jul 15 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
Jun 12 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
Dec 22 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
Dec 28 Javascript
从零开始搭建webpack+react开发环境的详细步骤
May 18 Javascript
通过封装scroll.js 获取滚动条的值
Jul 13 Javascript
微信小程序框架wepy之动态控制类名
Sep 14 Javascript
Vue 使用beforeEach实现登录状态检查功能
Oct 31 Javascript
vue vant Area组件使用详解
Dec 09 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
Jan 21 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基于dom实现读取图书xml格式数据的方法
2017/02/03 PHP
PHP实现Unicode编码相互转换的方法示例
2020/11/17 PHP
Javascript调用XML制作连动下拉列表框
2006/06/25 Javascript
Javascript 解疑
2009/11/11 Javascript
javascript instanceof 与typeof使用说明
2010/01/11 Javascript
JavaScript replace(rgExp,fn)正则替换的用法
2010/03/04 Javascript
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
用Jquery.load载入页面实现局部刷新
2014/01/22 Javascript
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
深入浅析同源策略和跨域访问
2015/11/26 Javascript
node.js实现快速截图
2016/08/27 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
2016/09/23 Javascript
详解webpack+angular2开发环境搭建
2017/06/28 Javascript
webuploader分片上传的实现代码(前后端分离)
2018/09/10 Javascript
vue 限制input只能输入正数的操作
2020/08/05 Javascript
Python 26进制计算实现方法
2015/05/28 Python
Python正则捕获操作示例
2017/08/19 Python
在python中利用KNN实现对iris进行分类的方法
2018/12/11 Python
Python sys模块常用方法解析
2020/02/20 Python
解决更改AUTH_USER_MODEL后出现的问题
2020/05/14 Python
利用Python实现斐波那契数列的方法实例
2020/07/26 Python
用python制作个视频下载器
2021/02/01 Python
详解CSS3的box-shadow属性制作边框阴影效果的方法
2016/05/10 HTML / CSS
CSS3 实现的缩略图悬停效果
2020/12/09 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
2015/09/08 HTML / CSS
韩国三星旗下的一家超市连锁店:Home Plus
2016/07/30 全球购物
friso美素佳儿官方海外旗舰店:荷兰原产原罐
2017/07/03 全球购物
Hotels.com韩国:海外国内旅行所需的酒店和住宿预订网站
2020/05/08 全球购物
C#里面如何判断一个Object是否是某种类型(如Boolean)?
2016/02/10 面试题
年会活动策划方案
2014/01/23 职场文书
生产部岗位职责范文
2014/02/07 职场文书
经贸韩语专业大学生职业规划
2014/02/14 职场文书
餐厅周年庆活动方案
2014/08/25 职场文书
anaconda python3.8安装后降级
2021/06/11 Python
MySQL中的引号和反引号的区别与用法详解
2021/10/24 MySQL