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