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