vue router 傳參獲取不到的解決方式
更新時(shí)間：2019年11月13日 16:36:23 作者：lzcwds
今天小編就為大家分享一篇vue router 傳參獲取不到的解決方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
在當(dāng)前路由中有一個(gè)toArticle方法可以跳轉(zhuǎn)到article頁(yè)面
methods:{
toArticle:function(index) {
this.$router.push({path:'/article',params:this.blogList[index]});
}
}
在article中接受不到params
mounted(){
console.log(this.$route.params)
//這里輸出undifined
}
導(dǎo)致這樣的原因是因?yàn)閜arams需要通過(guò)name來(lái)獲取，這里就要明白query和params的區(qū)別了
query要用path來(lái)引入,接收參數(shù)都是this.$route.query.name。query類似于ajax中g(shù)et傳參，即在瀏覽器地址欄中顯示參數(shù)。
params要用name來(lái)引入，接收參數(shù)都是this.$route.params.name。params則類似于post，即在瀏覽器地址欄中不顯示參數(shù)。
所以以上帶面做下面這樣的修改就可以獲取數(shù)據(jù)：
methods:{
toArticle:function(index) {
this.$router.push({name:'article',params:this.blogList[index]});
}
}
以上這篇vue router 傳參獲取不到的解決方式就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue彈窗插件實(shí)戰(zhàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue使用el-upload批量上傳圖片時(shí)報(bào)錯(cuò)問(wèn)題處理方法
相信大家都知道在element-ui中,el-upload可以進(jìn)行文件多選操作,下面這篇文章主要給大家介紹了關(guān)于Vue使用el-upload批量上傳圖片時(shí)報(bào)錯(cuò)問(wèn)題的處理方法,文中通過(guò)圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
Vue中@click.native的使用方法及場(chǎng)景
在組件中時(shí)?？吹紷click.native,在項(xiàng)目中遇到后,簡(jiǎn)單介紹下,這篇文章主要給大家介紹了關(guān)于Vue中@click.native的使用方法及場(chǎng)景的相關(guān)資料,需要的朋友可以參考下2023-11-11
vue3新特性中最重要、內(nèi)容最多的組合式api,組合式api既可以解決之前vue2開發(fā)的痛點(diǎn),又提升了性能,下面這篇文章主要給大家介紹了關(guān)于vue3?option?api新玩法的相關(guān)資料,需要的朋友可以參考下2022-06-06
vue2.0+webpack環(huán)境的構(gòu)造過(guò)程
本文分步驟給大家介紹了vue2.0+webpack環(huán)境的構(gòu)造過(guò)程的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-11-11
vue的特點(diǎn)之一是組件化開發(fā)，那么問(wèn)題來(lái)了，組件中的數(shù)據(jù)和方法都是獨(dú)立的，我們?nèi)绾芜M(jìn)行組件之間的交互呢。這個(gè)時(shí)候就要用到組件傳參了2022-07-07
vue項(xiàng)目中使用particles實(shí)現(xiàn)粒子背景效果及遇到的坑(按鈕沒(méi)有點(diǎn)擊響應(yīng))
為了提高頁(yè)面展示效果，登錄界面內(nèi)容比較單一的，粒子效果作為背景經(jīng)常使用到，vue工程中利用vue-particles可以很簡(jiǎn)單的實(shí)現(xiàn)頁(yè)面的粒子背景效果，本文給大家分享在實(shí)現(xiàn)過(guò)程中遇到問(wèn)題，需要的朋友一起看看吧2020-02-02
這篇文章主要為大家詳細(xì)介紹了vue中非父子組件通信，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
在Vue中,路由攔截器主要用于在導(dǎo)航到某個(gè)路由前或者離開某個(gè)路由時(shí)進(jìn)行攔截和處理,下面給大家介紹vue中的路由攔截器的作用,感興趣的朋友一起看看吧2024-07-07
解決vue中使用swiper 插件出錯(cuò)的問(wèn)題
這篇文章主要介紹了vue中使用swiper 插件出錯(cuò)問(wèn)題及解決辦法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-08-08