Vue路由傳參的三種方式實(shí)例詳解
Vue路由傳參三種方式
- params傳參
- 路由屬性配置傳參
- query傳參
一、params傳參
this.$router.push({
name:"admin",
//這里的params是一個(gè)對(duì)象，id是屬性名，item.id是值(可以從當(dāng)前組件或者Vue實(shí)例上直接取)
params:{id:item.id}
})
//這個(gè)組件對(duì)應(yīng)的路由配置
{
//組件路徑
path: '/admin',
//組件別名
name: 'admin',
//組件名
component: Admin,
}
通過params傳遞參數(shù)，如果我們想獲取 id 的參數(shù)值，可以通過this.$route.params.id這種方式來打印出來就可以得到了；
注意：獲取參數(shù)的時(shí)候是 $route，跳轉(zhuǎn)和傳參的時(shí)候是 $router
二、路由屬性配置傳參：
this.$router.push({
name:"/admin/${item.id}",
})
//這個(gè)組件對(duì)應(yīng)的路由配置
{
//組件路徑
path: '/admin:id',
//組件別名
name: 'admin',
//組件名
component: Admin,
}
通過路由屬性配置傳參我們可以用this.$route.params.id來獲取到 id 的值，
注意 this. $router.push 方法里面路徑帶的是值，路由配置項(xiàng)那里帶的是變量名(屬性名)來實(shí)現(xiàn)的對(duì)應(yīng)；
以上兩種傳參方式基本上可以理解為 ajax 中的 post 請(qǐng)求方式，參數(shù)都是不可見的，但是上面兩種方法都有一個(gè)弊端，就是當(dāng)頁面刷新了是獲取不到參數(shù)值的，那么有沒有一種方法是頁面刷新之后參數(shù)依然存在呢？
三、query傳參
this.$router.push({
name:"/admin",
query:{id：item.id}
})
//這個(gè)組件對(duì)應(yīng)的路由配置
{
//組件路徑
path: '/admin',
//組件別名
name: 'admin',
//組件名
component: Admin,
}
第三種方式是用 query 來傳參，這種方式是可以解決頁面刷新參數(shù)消失問題的，這種方式可以理解為是 ajax 中的 get 方法，參數(shù)是直接在 url 后面添加的，參數(shù)是可見的，所以解決頁面刷新參數(shù)消失問題建議使用此方法來解決；
區(qū)別
（1）params傳參
- 只能用 name，不能用 path。
- 地址欄不顯示參數(shù)名稱 id，但是有參數(shù)的值。
（2）query傳參
- name 和 path 都能用。用 path 的時(shí)候，提供的 path 值必須是相對(duì)于根路徑的相對(duì)路徑，而不是相對(duì)于父路由的相對(duì)路徑，否則無法成功訪問。
- 地址欄顯示參數(shù)格式為?id=0&code=1
特別注意
route與router的區(qū)別。route表示路由屬性；router表示路由實(shí)例。
以上3種是路由傳參的基本方式。除了以上幾種還可以使用sessionStorage/localStorage/cookie進(jìn)行存儲(chǔ)也可以進(jìn)行存儲(chǔ)也可以，使用VUEX也行，具體因場(chǎng)景而異。
總結(jié)
到此這篇關(guān)于Vue路由傳參的三種方式的文章就介紹到這了,更多相關(guān)Vue路由傳參方式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue中Form 表單的 resetFields() 失效原因及問題解決
在Vue項(xiàng)目中,使用formRef.value.resetFields()方法重置表單時(shí)可能遇到不起作用的問題,下面就來介紹一下如何解決,感興趣的可以了解一下2024-09-09
vite.config配置alias Error: ENOTEMPTY: director
這篇文章主要為大家介紹了vite.config配置alias時(shí)報(bào)錯(cuò)：Error: ENOTEMPTY: directory not empty, rmdir解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
Vue中使用虛擬dom且根據(jù)diff算法進(jìn)行新舊DOM對(duì)比,從而更新真實(shí) dom,key是虛擬DOM對(duì)象的唯一標(biāo)識(shí),在diff算法中key起著極其重要的作用,下面這篇文章主要給大家介紹了關(guān)于Vue中為什么不推薦用index做key的相關(guān)資料,需要的朋友可以參考下2022-09-09
vue控制臺(tái)警告Runtime directive used on compon
這篇文章主要為大家介紹了vue控制臺(tái)警告Runtime directive used on component with non-element root node解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
本文通過實(shí)例代碼給大家介紹了vue 中swiper的使用，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)記事本小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
Vue 動(dòng)態(tài)組件components和v-once指令的實(shí)現(xiàn)
這篇文章主要介紹了Vue 動(dòng)態(tài)組件components和v-once指令的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
watch 函數(shù)是 Vue.js 提供的一個(gè)強(qiáng)大工具,用于響應(yīng)數(shù)據(jù)變化并執(zhí)行相應(yīng)的回調(diào),通過合理使用 watch 函數(shù),我們可以實(shí)現(xiàn)異步數(shù)據(jù)請(qǐng)求、表單驗(yàn)證、動(dòng)態(tài)樣式等多種功能,這篇文章主要介紹了Vue.js 的 watch函數(shù),需要的朋友可以參考下2024-08-08
這篇文章主要介紹了Vue中的局部組件，文章圍繞Vue局部組件得相關(guān)資料展開內(nèi)容，需要的的小孩伙伴請(qǐng)參考下面文章的具體介紹，希望對(duì)你有所幫助2021-12-12
這篇文章主要介紹了Vue?收集表單數(shù)據(jù)方法詳情，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-05-05