Vue路由傳參及props解耦深入分析
關(guān)于路由傳參的幾種方式，眾說紛紜。今天來總結(jié)下路由傳參的幾種方式與路由解耦：
一、路由傳參
路由傳參總的來說有兩種方式，query和params，配合聲明式導(dǎo)航與編程式導(dǎo)航，各有不同的幾種寫法；
query傳參
query配合聲明式導(dǎo)航
//路由配置
{
path: '/a01',
name: 'a01',
component: a01
}
//傳參方式1--通過url拼接，使用?分割
<router-link to="/a01?data=a01">a01</router-link>
//傳參方式2--傳入對象
<router-link :to="{ path: '/a01', query: { data: 'a01' } }">a02</router-link>
query配合編程式導(dǎo)航
路由配置方式不變；
//綁定事件
<span @click="btn('/a01', 'a01')">b01</span>
//處理路由方式1，通過path配合query
btn(path, data) {
this.$router.push({
path,
query: {
data,
},
});
},
//處理路由方式2，通過name配合query
btn1(name, data) {
this.$router.push({
name,
query: {
data,
},
});
},query傳參的特點(diǎn)
1.參數(shù)在url中展現(xiàn)，使用？分割。屬性和值以鍵值對形式存在
2.子組件通過$route.query.xxx方式獲取參數(shù)（xxx為自己定義的參數(shù)名）
params傳參
params傳參分為兩種情況，路徑占位與不占位
路徑使用參數(shù)占位時(shí)
params配合聲明式導(dǎo)航：
//路由聲明需要使用‘：'占位
{
path: '/a02/:data',
name: 'a02',
component: a02
}
//傳參方式1--url拼接，不需要？分割
<router-link to="/a02/a02">a02</router-link>
//傳參方式2--傳對象
<router-link :to="{ path: '/a02/a02' }">a02.1</router-link>
params配合編程式導(dǎo)航：
btn1(name, data) {
this.$router.push({
name,
params: {
data,
},
});
},
params傳參配合路徑占位的特點(diǎn)：
1.參數(shù)在url中展現(xiàn)，沒有？=等額外標(biāo)簽
2.子組件以$route.params.xxx方式獲取參數(shù)（xxx為自己定義的參數(shù)名）
路徑不使用占位時(shí)
聲明式導(dǎo)航
<router-link :to="{ name:'a02',params:{data:'a02'} }">a02.1</router-link>
注意??！需要使用name，不可以使用path，官網(wǎng)解釋如下：
注意：如果提供了 path，params 會(huì)被忽略，你需要提供路由的 name 或手寫完整的帶有參數(shù)的 path
編程式導(dǎo)航
//路由配置
{
path: '/a03',
name: 'a03',
component: a03
}
//路由跳轉(zhuǎn)
<span @click="btn3('a03', 'a03')">b04</span>
btn3(name, data) {
this.$router.push({
name,
params: {
data,
},
});
},params傳參占位的特點(diǎn)：
1.參數(shù)在不在url體現(xiàn)
2.刷新后數(shù)據(jù)丟失
二、props解耦
vue的組件是可以復(fù)用的，但是路由給子組件傳值后，通過$route獲取參數(shù)會(huì)導(dǎo)致子組件無法復(fù)用，解決這個(gè)問題，需要用到props解耦；
1.props布爾值
具體使用：
1.在路由配置時(shí)使用props
{
path: '/a02/:data',
name: 'a02',
component: a02,
//使用props傳參
props: true
}
2.父組件傳參，沒有變化
3.子組件使用props接收
<template>
<p>{{ data }}</p>
</template>
<script>
export default {
props: {
data: {
type: String,
},
},
};
</script>
props為布爾值 true 開啟props接收，false關(guān)閉。
上例我們演示的就是這樣的情況，但是，props為布爾值時(shí)，只適用于params傳參，對query不適用；
2.props函數(shù)模式
props配置為函數(shù)，可以獲取query方式的傳值，通過route.query.xxx方式
//配置
{
path: '/a01',
name: 'a01',
component: a01,
props: (route) => ({ data: route.query.data })
}
//傳參--與query一致
<router-link to="/a01?data=a01">a01</router-link>
//接收
<template>
<p>{{ data }}</p>
</template>
<script>
export default {
props: {
data: {
type: String,
},
},
};
</script>3.props對象模式
props對象模式直接傳遞固定值，不需要再傳參；
//配置
{
path: '/a01',
name: 'a01',
component: a01,
props: {data:'123'}
}
以上，為本次分享全部內(nèi)容，如有錯(cuò)誤，歡迎隨時(shí)私信指正，不勝感激。
到此這篇關(guān)于Vue路由傳參及props解耦深入分析的文章就介紹到這了,更多相關(guān)Vue路由傳參內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue.js?Table?組件自定義列寬實(shí)現(xiàn)核心方法
這篇文章主要介紹了vue.js?Table?組件自定義列寬實(shí)現(xiàn)核心方法,文圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-07-07
vue elementui el-form rules動(dòng)態(tài)驗(yàn)證的實(shí)例代碼詳解
在使用elementUI el-form 中，對于業(yè)務(wù)不同的時(shí)候可能會(huì)產(chǎn)生不同表單結(jié)構(gòu)，但是都是存在同一個(gè)表單控件el-form中。這篇文章主要介紹了vue elementui el-form rules動(dòng)態(tài)驗(yàn)證的實(shí)例代碼,需要的朋友可以參考下2019-05-05
vant中的Cascader級聯(lián)選擇異步加載地區(qū)數(shù)據(jù)方式
這篇文章主要介紹了vant中的Cascader級聯(lián)選擇異步加載地區(qū)數(shù)據(jù)方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
本篇文章主要介紹了vue源碼看觀察者模式，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
Vue3 組合式函數(shù)Composable最佳實(shí)戰(zhàn)
這篇文章主要為大家介紹了Vue3 組合式函數(shù)Composable最佳實(shí)戰(zhàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
vue.js集成echarts時(shí)遇到的一些問題總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于vue.js集成echarts遇到的一些問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
要想實(shí)現(xiàn)一個(gè)吸頂效果不是很難,網(wǎng)絡(luò)上有很多教程,其中有一種就是通過fiexd加top來實(shí)現(xiàn),今天突然就想做一個(gè)吸頂效果,因?yàn)樽罱荚谟胿ue,所以想用vue來做一個(gè)吸頂效果的案例,感興趣的朋友可以參考下2023-11-11
茶余飯后聊聊Vue3.0響應(yīng)式數(shù)據(jù)那些事兒
這篇文章主要介紹了茶余飯后聊聊Vue3.0響應(yīng)式數(shù)據(jù)那些事兒，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了vue.js功能介紹 - 指令，組件詳細(xì)介紹及實(shí)例，詳細(xì)的介紹了指令和組件的用法，有興趣的可以了解一下。2017-04-04
react在中后臺(tái)項(xiàng)目中由于在處理復(fù)雜的業(yè)務(wù)邏輯或組件的復(fù)用問題比vue優(yōu)雅而被人認(rèn)可，但也更需要團(tuán)隊(duì)技術(shù)整體比較給力，領(lǐng)頭大佬的設(shè)計(jì)與把關(guān)能力要更優(yōu)秀，因此開發(fā)成本更大，下面文章就來詳細(xì)介紹,需要的朋友可以參考下2021-09-09