Vue路由傳參及props解耦深入分析
關于路由傳參的幾種方式，眾說紛紜。今天來總結(jié)下路由傳參的幾種方式與路由解耦：
一、路由傳參
路由傳參總的來說有兩種方式，query和params，配合聲明式導航與編程式導航，各有不同的幾種寫法；
query傳參
query配合聲明式導航
//路由配置
{
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配合編程式導航
路由配置方式不變；
//綁定事件
<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傳參的特點
1.參數(shù)在url中展現(xiàn)，使用？分割。屬性和值以鍵值對形式存在
2.子組件通過$route.query.xxx方式獲取參數(shù)（xxx為自己定義的參數(shù)名）
params傳參
params傳參分為兩種情況，路徑占位與不占位
路徑使用參數(shù)占位時
params配合聲明式導航：
//路由聲明需要使用‘：'占位
{
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配合編程式導航：
btn1(name, data) {
this.$router.push({
name,
params: {
data,
},
});
},
params傳參配合路徑占位的特點：
1.參數(shù)在url中展現(xiàn)，沒有？=等額外標簽
2.子組件以$route.params.xxx方式獲取參數(shù)（xxx為自己定義的參數(shù)名）
路徑不使用占位時
聲明式導航
<router-link :to="{ name:'a02',params:{data:'a02'} }">a02.1</router-link>
注意?。⌒枰褂胣ame，不可以使用path，官網(wǎng)解釋如下：
注意：如果提供了 path，params 會被忽略，你需要提供路由的 name 或手寫完整的帶有參數(shù)的 path
編程式導航
//路由配置
{
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傳參占位的特點：
1.參數(shù)在不在url體現(xiàn)
2.刷新后數(shù)據(jù)丟失
二、props解耦
vue的組件是可以復用的，但是路由給子組件傳值后，通過$route獲取參數(shù)會導致子組件無法復用，解決這個問題，需要用到props解耦；
1.props布爾值
具體使用：
1.在路由配置時使用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關閉。
上例我們演示的就是這樣的情況，但是，props為布爾值時，只適用于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)容，如有錯誤，歡迎隨時私信指正，不勝感激。
到此這篇關于Vue路由傳參及props解耦深入分析的文章就介紹到這了,更多相關Vue路由傳參內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue Promise解決回調(diào)地獄問題實現(xiàn)方法
這篇文章主要介紹了Vue Promise解決回調(diào)地獄問題，總的來說這并不是一道難題，那為什么要拿出這道題介紹？拿出這道題真正想要傳達的是解題的思路，以及不斷優(yōu)化探尋最優(yōu)解的過程。希望通過這道題能給你帶來一種解題優(yōu)化的思路2023-01-01
本篇文章主要介紹了vue源碼看觀察者模式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了vue項目Luckysheet的使用,目前Luckysheet不支持使用npm安裝包，所以只能使用CDN引入依賴，在vue項目的public/index.html文件里引入即可，本文通過示例代碼給大家詳細介紹，需要的朋友可以參考下2022-08-08
vue實現(xiàn)拖動調(diào)整左右兩側(cè)容器大小
這篇文章主要為大家詳細介紹了vue實現(xiàn)拖動調(diào)整左右兩側(cè)容器大小，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue.js實現(xiàn)條件渲染的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
今天小編就為大家分享一篇vuex存儲token示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
今天小編就為大家分享一篇在Vue項目中,防止頁面被縮放和放大示例，具有很好的參考 價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了Vue中的Ajax?配置代理?slot插槽的相關知識，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-06-06
Vue v-for中的 input 或 select的值發(fā)生改變時觸發(fā)事件操作
這篇文章主要介紹了Vue v-for中的 input 或 select的值發(fā)生改變時觸發(fā)事件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了Vue富文本插件(quill-editor)的使用及說明，具有很好的參考價值，希望對大家有所幫助。2023-02-02