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 相关文章推荐
CSS+Jquery实现页面圆角框方法大全
Dec 24 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
Nov 08 Javascript
Jquery结合HTML5实现文件上传
Jun 25 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
Dec 13 Javascript
使用elementUI实现将图片上传到本地的示例
Sep 04 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
Sep 15 Javascript
解决vue移动端适配问题
Dec 12 Javascript
vue组件之间的数据传递方法详解
Apr 19 Javascript
微信小程序之几种常见的弹框提示信息实现详解
Jul 11 Javascript
基于Node的Axure文件在线预览的实现代码
Aug 28 Javascript
JS扁平化输出数组的2种方法解析
Sep 17 Javascript
对vuex中store和$store的区别说明
Jul 24 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扩展图文教程
2008/12/12 PHP
php判断文件上传类型及过滤不安全数据的方法
2014/12/17 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
php安装php_rar扩展实现rar文件读取和解压的方法
2016/11/17 PHP
浅析php中array_map和array_walk的使用对比
2016/11/20 PHP
PHP生成指定范围内的N个不重复的随机数
2019/03/18 PHP
另类调用flash无须激活的方法
2006/12/27 Javascript
JS加jquery简单实现标签元素的显示或隐藏
2013/09/23 Javascript
详解JS 比较两个Json对象的值是否相等的实例
2013/11/20 Javascript
举例讲解AngularJS中的模块
2015/06/17 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
jQuery判断浏览器并动态调整select宽度的方法
2016/03/02 Javascript
jQuery实现无限往下滚动效果代码
2016/04/16 Javascript
Bootstrap每天必学之响应式导航、轮播图
2016/04/25 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
2016/11/21 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
JavaScript轻松创建级联函数的方法示例
2017/02/10 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
2017/06/02 Javascript
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
Python使用matplotlib实现在坐标系中画一个矩形的方法
2015/05/20 Python
Python中的命令行参数解析工具之docopt详解
2017/03/27 Python
Python外星人入侵游戏编程完整版
2020/03/30 Python
Python开发中爬虫使用代理proxy抓取网页的方法示例
2017/09/26 Python
攻击者是如何将PHP Phar包伪装成图像以绕过文件类型检测的(推荐)
2018/10/11 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
django修改models重建数据库的操作
2020/03/31 Python
中软Java笔试题
2012/11/11 面试题
会议活动邀请函
2014/01/27 职场文书
2014年两会学习心得范例
2014/03/17 职场文书
整改通知书
2015/04/20 职场文书
四群教育工作总结
2015/08/10 职场文书
2019中小学生安全过暑期倡议书
2019/06/24 职场文书
浅谈由position属性引申的css进阶讨论
2021/05/25 HTML / CSS
python中subplot大小的设置步骤
2021/06/28 Python
与Windows10相比Windows11有哪些改进?值不值得升级?
2021/11/21 数码科技