vue.js this.$router.push獲取不到params參數(shù)問題
主要通過兩種方式傳參
1.query方式傳參和接受參數(shù)
this.$router.push({
path:'/xxx'
query:{
idname:id
}
})
接收的方式：this.$route.query.id
2.params方式傳遞參數(shù)
this.$router.push({
name:'路徑名稱'
query:{
idname:id
}
})
接收的方式：this.$route.params.id
代碼
this.$router.push({
path: '/container',
params: {
url: this.func.url,
},
});
在跳轉(zhuǎn)后的頁面中console.log(this.route)發(fā)現(xiàn)params是空的
問題原因:用法錯誤,以下為正確用法
this.$router.push({
name: 'container',
params: {
url: this.func.url,
},
});
要使跳轉(zhuǎn)后的頁面this.$route.params有參數(shù)，必須使用name:'container'，而不是path:'/container'，還需要注意name中沒有/
this.$router.push({
name: 'container',
params: {
url: this.func.url,
},
});
參數(shù)獲取this.$route.params.url
this.$router.push({
path: '/container',
query: {
url: this.func.url,
},
});
這種方式會在跳轉(zhuǎn)的地址上拼接上?url=xxxx
獲取方式this.$route.query.url
導(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ù)。
注意區(qū)別兩種方式，切勿path和name同時出現(xiàn)
到此這篇關(guān)于vue.js this.$router.push獲取不到params參數(shù)問題的文章就介紹到這了,更多相關(guān)this.$router.push獲取參數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
如何用VUE和Canvas實現(xiàn)雷霆戰(zhàn)機(jī)打字類小游戲
這篇文章主要介紹了如何用VUE和Canvas實現(xiàn)雷霆戰(zhàn)機(jī)打字類小游戲，麻雀雖小，五臟俱全，對游戲感興趣的同學(xué)，可以參考下，研究里面的原理和實現(xiàn)方法2021-04-04
vue實例成員?插值表達(dá)式?過濾器基礎(chǔ)教程示例詳解
這篇文章主要為大家介紹了vue實例成員?插值表達(dá)式?過濾器基礎(chǔ)教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪2022-04-04
<script?setup>是vue3中新引入的語法糖,目的是簡化使用Composition?API時冗長的模板代碼,下面這篇文章主要給大家介紹了關(guān)于vue3中單文件組件<script?setup>的相關(guān)資料,需要的朋友可以參考下2022-07-07
有時候會碰到查詢條件需要用下拉框來區(qū)分的時候,比如需要區(qū)分全部?|?啟用?|?停用三個狀態(tài),這時一般會給全部的value值設(shè)置為'',但是這樣會導(dǎo)致下拉框無法選中對應(yīng)的全部選項,本文就來介紹一下這個問題解決,感興趣的可以了解一下2024-11-11
解決vue+ element ui 表單驗證有值但驗證失敗問題
這篇文章主要介紹了vue+ element ui 表單驗證有值但驗證失敗，本文通過實例代碼給大家分享解決方案，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01
這篇文章主要介紹了一文詳解Vue3響應(yīng)式原理，文章通過與vue2.x?的響應(yīng)式做對比詳解展現(xiàn)出了Vue3響應(yīng)式原理詳情，感興趣的小伙伴可以參考一下2022-06-06
無論是小型項目還是中大型項目，Vue-Router都是必選的一個組件，Vue-Router提供了便捷的方式進(jìn)行路由跳轉(zhuǎn)，在使用過程中有一些坑，希望能給在編碼找不到問題時的碼農(nóng)提供一點靈感2022-06-06
vue3之Suspense加載異步數(shù)據(jù)的使用
本文主要介紹了vue3之Suspense加載異步數(shù)據(jù)的使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
這篇文章主要介紹了vue組件之間相互傳值的方式，對vue感興趣的同學(xué)，可以參考下2021-05-05
Vue動態(tài)控制input的disabled屬性的方法
這篇文章主要介紹了Vue動態(tài)控制input的disabled屬性的方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06