vue router 传参获取不到的解决方式
更新时间：2019年11月13日 16:36:23 作者：lzcwds
今天小编就为大家分享一篇vue router 传参获取不到的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在当前路由中有一个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 传参获取不到的解决方式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue弹窗插件实战代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
相信大家都知道在element-ui中,el-upload可以进行文件多选操作,下面这篇文章主要给大家介绍了关于Vue使用el-upload批量上传图片时报错问题的处理方法,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
在组件中时常看到@click.native,在项目中遇到后,简单介绍下,这篇文章主要给大家介绍了关于Vue中@click.native的使用方法及场景的相关资料,需要的朋友可以参考下2023-11-11
vue3新特性中最重要、内容最多的组合式api,组合式api既可以解决之前vue2开发的痛点,又提升了性能,下面这篇文章主要给大家介绍了关于vue3 option api新玩法的相关资料,需要的朋友可以参考下2022-06-06
本文分步骤给大家介绍了vue2.0+webpack环境的构造过程的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下2016-11-11
vue的特点之一是组件化开发，那么问题来了，组件中的数据和方法都是独立的，我们如何进行组件之间的交互呢。这个时候就要用到组件传参了2022-07-07
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
为了提高页面展示效果，登录界面内容比较单一的，粒子效果作为背景经常使用到，vue工程中利用vue-particles可以很简单的实现页面的粒子背景效果，本文给大家分享在实现过程中遇到问题，需要的朋友一起看看吧2020-02-02
这篇文章主要为大家详细介绍了vue中非父子组件通信，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
在Vue中,路由拦截器主要用于在导航到某个路由前或者离开某个路由时进行拦截和处理,下面给大家介绍vue中的路由拦截器的作用,感兴趣的朋友一起看看吧2024-07-07
这篇文章主要介绍了vue中使用swiper 插件出错问题及解决办法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-08-08
最新评论