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 相关文章推荐
ie下动态加态js文件的方法
Sep 13 Javascript
表单验证的完整应用案例探讨
Mar 29 Javascript
js 程序执行与顺序实现详解
May 13 Javascript
alert出数组中的随即值代码
Sep 25 Javascript
js实现鼠标感应图片展示的方法
Feb 27 Javascript
JS图片放大效果简单实现代码
Sep 08 Javascript
JavaScript简单下拉菜单特效
Sep 13 Javascript
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
每周一练 之 数据结构与算法(Stack)
Apr 16 Javascript
Node.js从字符串生成文件流的实现方法
Aug 18 Javascript
Vue父子之间值传递的实例教程
Jul 02 Javascript
TypeScript 使用 Tuple Union 声明函数重载
Apr 07 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将数据导入到Foxmail的实现代码
2010/09/05 PHP
php的闭包(Closure)匿名函数详解
2015/02/22 PHP
thinkphp中的url跳转用法分析
2016/07/12 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
jscript之Read an Excel Spreadsheet
2007/06/13 Javascript
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
google地图的路线实现代码
2009/08/20 Javascript
jquery异步循环获取功能实现代码
2010/09/19 Javascript
如何确保JavaScript的执行顺序 之实战篇
2011/03/03 Javascript
JavaScript实现找出数组中最长的连续数字序列
2014/09/03 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
2015/01/05 Javascript
以Python代码实例展示kNN算法的实际运用
2015/10/26 Javascript
动态JavaScript所造成一些你不知道的危害
2016/09/25 Javascript
jquery实现(textarea)placeholder自动换行
2016/12/22 Javascript
详解VueJs异步动态加载块
2017/03/09 Javascript
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
jQuery中each方法的使用详解
2018/03/18 jQuery
Vue 全家桶实现移动端酷狗音乐功能
2018/11/16 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
2019/02/01 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
Python星号*与**用法分析
2018/02/02 Python
python实现简单图片物体标注工具
2019/03/18 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
详解python logging日志传输
2020/07/01 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
突破canvas语法限制 让他支持链式语法
2012/12/24 HTML / CSS
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
大学学年自我鉴定
2013/10/28 职场文书
大专生自我评价
2014/01/28 职场文书
公司管理建议书范文
2014/03/12 职场文书
资助贫困学生倡议书
2014/05/16 职场文书
社团活动总结怎么写
2014/06/30 职场文书
单位工作证明范文
2014/09/14 职场文书
学校2014年度工作总结
2014/12/06 职场文书
课程设计感想范文
2015/08/11 职场文书