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 Plugin 插件的方法
Apr 20 Javascript
详解jQuery插件开发中的extend方法
Nov 19 Javascript
JavaScript实现的简单幂函数实例
Apr 17 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
Jun 17 Javascript
一个简单的JavaScript Map实例(分享)
Aug 03 Javascript
DOM事件探秘篇
Feb 15 Javascript
详解vue 配合vue-resource调用接口获取数据
Jun 22 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
Dec 26 Javascript
微信小程序登录session的使用
Mar 17 Javascript
在vue中动态添加class类进行显示隐藏实例
Nov 09 Javascript
vue excel上传预览和table内容下载到excel文件中
Dec 10 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
Jan 18 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中hashtable实现示例分享
2014/02/13 PHP
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
PHP中使用循环实现的金字塔图形
2014/11/08 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
Thinkphp3.2.3整合phpqrcode生成带logo的二维码
2016/07/21 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
JTrackBar水平拖动效果
2007/07/15 Javascript
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
2008/12/02 Javascript
从面试题学习Javascript 面向对象(创建对象)
2012/03/30 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
jQuery中extend函数详解
2015/07/13 Javascript
js代码实现无缝滚动(文字和图片)
2015/08/20 Javascript
深入浅析JavaScript中with语句的理解
2016/05/12 Javascript
分享JavaScript监听全部Ajax请求事件的方法
2016/08/28 Javascript
jQuery滚动插件scrollable.js用法分析
2017/05/25 jQuery
微信小程序实现的一键拨号功能示例
2019/04/24 Javascript
[00:31]DOTA2上海特级锦标赛 Fnatic战队宣传片
2016/03/04 DOTA
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
[01:26]神话结束了,却也刚刚开始——DOTA2新英雄玛尔斯驾临战场
2019/03/10 DOTA
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
Python中的日期时间处理详解
2016/11/17 Python
TensorFlow车牌识别完整版代码(含车牌数据集)
2019/08/05 Python
提升python处理速度原理及方法实例
2019/12/25 Python
使用python实现多维数据降维操作
2020/02/24 Python
python request 模块详细介绍
2020/11/10 Python
德国购买健身器材:AsVIVA
2017/08/09 全球购物
美国婴儿用品店:Babies”R”Us
2017/10/12 全球购物
Boden英国官网:英国知名原创时装品牌
2018/11/06 全球购物
Lime Crime官网:美国一家主打梦幻精灵系的彩妆品牌
2019/03/22 全球购物
Laravel的加密解密与哈希实例讲解
2021/03/24 PHP
迎国庆演讲稿
2014/09/05 职场文书
2014年小学重阳节活动策划方案
2014/09/16 职场文书
MySQL 使用SQL语句修改表名的实现
2021/04/07 MySQL
css背景和边框标签实例详解
2021/05/21 HTML / CSS
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技