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 相关文章推荐
利用jQuery 实现GridView异步排序、分页的代码
Feb 06 Javascript
jQuery hover 延时器实现代码
Mar 12 Javascript
cookie.js 加载顺序问题怎么才有效
Jul 31 Javascript
javascript闭包传参和事件的循环绑定示例探讨
Apr 17 Javascript
js文本框走动跑马灯效果代码分享
Aug 25 Javascript
微信小程序 toast 详解及实例代码
Nov 09 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
Dec 06 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
Dec 08 Javascript
10个经典的网页鼠标特效代码
Jan 09 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
Jul 12 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
May 30 Javascript
vue在路由中验证token是否存在的简单实现
Nov 11 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中使用Oracle数据库(5)
2006/10/09 PHP
让PHP以ROOT权限执行系统命令的方法
2011/02/10 PHP
PHP开发者常犯的10个MySQL错误更正剖析
2012/01/30 PHP
php获取图片信息的方法详解
2015/12/10 PHP
PHP程序员学习使用Swoole的理由
2018/06/24 PHP
PHP封装的验证码工具类定义与用法示例
2018/08/22 PHP
CI框架网页缓存简单用法分析
2018/12/26 PHP
PHP用swoole+websocket和redis实现web一对一聊天
2019/11/05 PHP
Code:findPosX 和 findPosY
2006/12/20 Javascript
encode脚本和normal脚本混用的问题与解决方法
2007/03/08 Javascript
jQuery 核心函数以及jQuery对象
2010/03/23 Javascript
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
2010/11/30 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
JavaScript匿名函数与委托使用示例
2014/07/22 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
2016/06/20 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
2018/05/04 Javascript
vuex直接赋值的三种方法总结
2018/09/16 Javascript
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
js逆向解密之网络爬虫
2019/05/30 Javascript
微信小程序实现下拉刷新动画
2019/06/21 Javascript
JS回调函数 callback的理解与使用案例分析
2019/09/09 Javascript
JavaScript变量Dom对象的所有属性
2020/04/30 Javascript
[04:47]DOTA2-潍坊风行电子俱乐部探秘
2014/08/08 DOTA
python实现代理服务功能实例
2013/11/15 Python
Python2.x版本中cmp()方法的使用教程
2015/05/14 Python
Python实现好友全头像的拼接实例(推荐)
2017/06/24 Python
Django 静态文件配置过程详解
2019/07/23 Python
浅析PyTorch中nn.Linear的使用
2019/08/18 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
pytorch实现从本地加载 .pth 格式模型
2020/02/14 Python
python数据预处理 :样本分布不均的解决(过采样和欠采样)
2020/02/29 Python
Python用K-means聚类算法进行客户分群的实现
2020/08/23 Python
安全生产目标管理责任书
2014/07/25 职场文书
小学教师岗位职责
2015/04/02 职场文书
2015年招生工作总结
2015/05/04 职场文书
Java Spring Boot请求方式与请求映射过程分析
2022/06/25 Java/Android