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--傳入對(duì)象
<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)，使用？分割。屬性和值以鍵值對(duì)形式存在
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--傳對(duì)象
<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)致子組件無(wú)法復(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傳參，對(duì)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對(duì)象模式
props對(duì)象模式直接傳遞固定值，不需要再傳參；
//配置
{
path: '/a01',
name: 'a01',
component: a01,
props: {data:'123'}
}
以上，為本次分享全部?jī)?nèi)容，如有錯(cuò)誤，歡迎隨時(shí)私信指正，不勝感激。
到此這篇關(guān)于Vue路由傳參及props解耦深入分析的文章就介紹到這了,更多相關(guān)Vue路由傳參內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue Promise解決回調(diào)地獄問題實(shí)現(xiàn)方法
這篇文章主要介紹了Vue Promise解決回調(diào)地獄問題，總的來說這并不是一道難題，那為什么要拿出這道題介紹？拿出這道題真正想要傳達(dá)的是解題的思路，以及不斷優(yōu)化探尋最優(yōu)解的過程。希望通過這道題能給你帶來一種解題優(yōu)化的思路2023-01-01
本篇文章主要介紹了vue源碼看觀察者模式，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了vue項(xiàng)目Luckysheet的使用,目前Luckysheet不支持使用npm安裝包，所以只能使用CDN引入依賴，在vue項(xiàng)目的public/index.html文件里引入即可，本文通過示例代碼給大家詳細(xì)介紹，需要的朋友可以參考下2022-08-08
vue實(shí)現(xiàn)拖動(dòng)調(diào)整左右兩側(cè)容器大小
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)拖動(dòng)調(diào)整左右兩側(cè)容器大小，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue.js實(shí)現(xiàn)條件渲染的實(shí)例代碼
這篇文章主要介紹了vue.js實(shí)現(xiàn)條件渲染的實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
今天小編就為大家分享一篇vuex存儲(chǔ)token示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
在Vue項(xiàng)目中,防止頁(yè)面被縮放和放大示例
今天小編就為大家分享一篇在Vue項(xiàng)目中,防止頁(yè)面被縮放和放大示例，具有很好的參考 價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了Vue中的Ajax?配置代理?slot插槽的相關(guān)知識(shí)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-06-06
Vue v-for中的 input 或 select的值發(fā)生改變時(shí)觸發(fā)事件操作
這篇文章主要介紹了Vue v-for中的 input 或 select的值發(fā)生改變時(shí)觸發(fā)事件操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了Vue富文本插件(quill-editor)的使用及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2023-02-02