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