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是空的
問題原因:用法錯(cuò)誤,以下為正確用法
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,
},
});
這種方式會(huì)在跳轉(zhuǎn)的地址上拼接上?url=xxxx
獲取方式this.$route.query.url
導(dǎo)致這樣的原因是因?yàn)閜arams需要通過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同時(shí)出現(xiàn)
到此這篇關(guān)于vue.js this.$router.push獲取不到params參數(shù)問題的文章就介紹到這了,更多相關(guān)this.$router.push獲取參數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue使用canvas手寫輸入識(shí)別中文，工作時(shí)遇到一些項(xiàng)目如：系統(tǒng)上的輸入法使用不方便，客戶要求做一個(gè)嵌入web網(wǎng)頁的手寫輸入法。下面我們來看看文章得具體描述吧2021-11-11
這篇文章主要介紹了vue3.0 加載json的方法（非ajax），幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-10-10
這篇文章主要為大家詳細(xì)介紹了vue遞歸實(shí)現(xiàn)自定義tree組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
Vue+elementUI實(shí)現(xiàn)多圖片上傳與回顯功能（含回顯后繼續(xù)上傳或刪除）
這篇文章主要介紹了Vue+elementUI實(shí)現(xiàn)多圖片上傳與回顯功能（含回顯后繼續(xù)上傳或刪除）,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-03-03
在Vue中，computed屬性是一種計(jì)算屬性，它的值是根據(jù)其他數(shù)據(jù)的值動(dòng)態(tài)計(jì)算出來的，下面小編主要來和大家聊聊Vue 3的組合式API中如何使用computed屬性，感興趣的小伙伴快跟隨小編一起了解一下吧2023-06-06
當(dāng)vue使用庫中的getvalue方法時(shí)，需要調(diào)用相關(guān)方法，通過定義ref=“”，使用this.$refs.exampleEditor._setValue('')，具體示例代碼參考下本文，對(duì)vue使用引用庫中的方法，感興趣的朋友一起看看吧2021-07-07
Vue 微信端掃描二維碼蘋果端卻只能保存圖片問題(解決方法)
這幾天在做項(xiàng)目時(shí)遇到微信掃描二維碼的然后進(jìn)入公眾號(hào)網(wǎng)頁巴拉巴拉的，然后就很順利的遇到了在安卓端掃碼的時(shí)候，順利的一塌糊涂，然后到了蘋果端的時(shí)候，就只能出現(xiàn)一個(gè)保存圖片，然后就寫一下記錄一下這問題的解決方法2020-01-01
Vue echarts 實(shí)現(xiàn)離線中國地圖的示例代碼(細(xì)化到省份)
這篇文章主要介紹了Vue echarts 實(shí)現(xiàn)離線中國地圖,細(xì)化到省份,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue3基于script?setup語法$refs的使用，<BR>?在用vue3開發(fā)項(xiàng)目的時(shí)候，需要調(diào)用子組件的方法，于是想著用$refs來實(shí)現(xiàn)，但是我是使用script?setup語法糖，原先vue2的語法已經(jīng)不適用了。下面我們一起進(jìn)入文章看詳細(xì)內(nèi)容吧</P><P>2021-12-12
Vue Element UI + OSS實(shí)現(xiàn)上傳文件功能
這篇文章主要為大家詳細(xì)介紹了Vue Element UI + OSS實(shí)現(xiàn)上傳文件功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07