vue路由傳參方式的方式總結(jié)及獲取參數(shù)詳解
更新時(shí)間：2022年07月29日 15:58:09 作者：吃嘍嘍
vue 路由傳參的使用場(chǎng)景一般都是應(yīng)用在父路由跳轉(zhuǎn)到子路由時(shí),攜帶參數(shù)跳轉(zhuǎn),下面這篇文章主要給大家介紹了關(guān)于vue路由傳參方式的方式總結(jié)及獲取參數(shù)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
一、聲明式傳參
1.params傳參(顯示參數(shù))
在url中會(huì)顯示出傳參的值，刷新頁(yè)面不會(huì)失去拿到的參數(shù)，使用該方式傳值的時(shí)候，需要子路由提前配置好參數(shù)：
//路由參數(shù)配置
const router = new VueRouter({
routes: [{
path: '/about/:id',
component: User
}]
})
//聲明式導(dǎo)航使用
<router-link to="/about/12">跳轉(zhuǎn)</router-link>//路由參數(shù)配置
const router = new VueRouter({
routes: [{
name: 'user1',
path: '/about/:id',
component: User
}]
})
//聲明式導(dǎo)航使用
<router-link :to="{ name: 'user1', params: { id: 123 } }">跳轉(zhuǎn)</router-link>2.params傳參(不顯示參數(shù))
在url中不會(huì)顯示出傳參的值，但刷新頁(yè)面會(huì)失去拿到的參數(shù)，使用該方式 傳值 的時(shí)候，需要子路由提前配置好name參數(shù):
//路由參數(shù)配置
const router = new VueRouter({
routes: [{
name: 'user1',
path: '/about',
component: User
}]
})
//聲明式導(dǎo)航使用
<router-link :to="{ name: 'user1', params: { id: 123 } }">跳轉(zhuǎn)</router-link>3.query 傳參
query 傳過(guò)去的參數(shù)會(huì)拼接在地址欄中（?name=xx），刷新頁(yè)面數(shù)據(jù)不會(huì)丟失，使用path和name都可以：
//路由參數(shù)配置
const router = new VueRouter({
routes: [{
name: 'user1',
path: '/about',
component: User
}]
})
//使用name
<router-link :to="{ name: 'user1', query: { id: 123 }}"></router-link>
//使用path
<router-link :to="{ path: '/about', query: { id: 123 } }"></router-link>二、編程式傳參
1.params傳參(顯示參數(shù))
//路由配置
{
path: '/child/:id',
component: Child
}
//編程式使用
this.$router.push({
path:'/child/${id}',
})//路由配置
{
path: '/child:id',
component: Child,
name:Child
}
//編程式使用
this.$router.push({
name:'Child',
params:{
id:123
}
})2.params傳參(不顯示參數(shù))
//路由配置
{
path: '/child',
component: Child,
name:Child
}
//編程式使用
this.$router.push({
name:'Child',
params:{
id:123
}
})3.query 傳參
//路由配置
{
path: '/child',
component: Child,
name:Child
}
//編程式使用
//name方式
this.$router.push({
name:'Child',
query:{
id:1
}
})
//path方式
this.$router.push({
path:'/child',
query:{
id:1
}
})
三、獲取參數(shù)
1、params的獲取方式
this.$route.params.xxx
2、query的獲取方式
this.$route.query.xxx
四、需要注意的點(diǎn)
1、如果使用params傳參,且參數(shù)是以對(duì)象的形式，跳轉(zhuǎn)路徑只能使用name形式而不能用path.
2、如果想要params參數(shù)想傳參也可以不傳參需要在占位符后面加?。
//路由參數(shù)配置
const router = new VueRouter({
routes: [{
path: '/search/:keyword?',
name: 'search',
component: () => import('@/pages/Search'),
meta: { show: true }
}]
})
//編程式傳參
this.$router.push({
name: "search",
params: {},
query: { keyword: this.keyword },
});3、解決params傳值為空字符串路徑會(huì)出現(xiàn)問(wèn)題：
this.$router.push({
name: "search",
params: { keyword: "" || undefined },
query: { keyword: this.keyword },
});總結(jié)
到此這篇關(guān)于vue路由傳參方式的方式總結(jié)及獲取參數(shù)的文章就介紹到這了,更多相關(guān)vue路由傳參及獲取參數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue中接收二進(jìn)制文件流實(shí)現(xiàn)pdf預(yù)覽的方法
本文主要介紹了Vue中接收二進(jìn)制文件流實(shí)現(xiàn)pdf預(yù)覽的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
vue3 element-plus二次封裝組件系列之伸縮菜單制作
這篇文章主要介紹了vue3 element-plus二次封裝組件系列之伸縮菜單制作,是基于vue3 vite element-plus搭建的，值的注意的時(shí)候，里面的圖標(biāo)組件是經(jīng)過(guò)處理的，結(jié)合實(shí)例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2023-01-01
Vue?處理異步加載順序問(wèn)題之如何在Konva中確保文本在圖片之上顯示
在處理Konva中的異步加載順序問(wèn)題時(shí),確保在圖像加載完成后再添加其他元素是關(guān)鍵,通過(guò)將回調(diào)函數(shù)放在imageObj.onload中,并正確處理變量捕獲,我們可以確保文本總是繪制在圖片之上,這不僅解決了顯示順序的問(wèn)題,也為未來(lái)的調(diào)試提供了明確的方向,感興趣的朋友一起看看吧2024-07-07
這篇文章主要介紹了Vue中的Ajax?配置代理?slot插槽的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-06-06
Vue項(xiàng)目中ESlint規(guī)范示例代碼
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中ESlint規(guī)范的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
對(duì)Vue beforeRouteEnter 的next執(zhí)行時(shí)機(jī)詳解
今天小編就為大家分享一篇對(duì)Vue beforeRouteEnter 的next執(zhí)行時(shí)機(jī)詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Vue2遞歸組件實(shí)現(xiàn)樹(shù)形菜單
這篇文章主要為大家詳細(xì)介紹了Vue2遞歸組件實(shí)現(xiàn)樹(shù)形菜單的相關(guān)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
vant-ui組件庫(kù)中如何修改NavBar導(dǎo)航欄的樣式
這篇文章主要介紹了vant-ui組件庫(kù)中如何修改NavBar導(dǎo)航欄的樣式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
vue渲染時(shí)閃爍{{}}的問(wèn)題及解決方法
v-if和v-show可能是日常開(kāi)發(fā)中最常用的兩個(gè)指令，雖然看上去兩者功能是類似的，但是兩者還是存在很大區(qū)別的。接下來(lái)通過(guò)本文給大家分享vue渲染時(shí)閃爍{{}}的問(wèn)題及解決方法，感興趣的朋友一起看看吧2018-03-03