詳解Vue 路由組件傳參的 8 種方式
我們在開發(fā)單頁面應(yīng)用時，有時需要進入某個路由后基于參數(shù)從服務(wù)器獲取數(shù)據(jù)，那么我們首先要獲取路由傳遞過來的參數(shù)，從而完成服務(wù)器請求，所以，我們需要了解路由傳參的幾種方式，以下方式同 vue-router@4 。
編程式路由傳參
除了使用 <router-link> 創(chuàng)建 a 標(biāo)簽來定義導(dǎo)航鏈接，我們還可以借助 router 的實例方法，通過編寫代碼來實現(xiàn)。
1. 通過 params 傳遞
路由配置
路徑參數(shù) 用冒號 : 表示。
const routes = [
// 動態(tài)段以冒號開始
{ path: 'details/:id', name: "details", component: Details },
]
router.push() 方法的參數(shù)可以是一個字符串路徑，或者一個描述地址的對象。
const Home = {
template: '<div @click="toDetails">To Details</div>',
metheds: {
toDetails() {
// 字符串路徑
this.$router.push('/details/001')
// 帶有路徑的對象
this.$router.push({path: '/details/001'})
// 命名路由，路由配置時，需要 name 字段
this.$router.push({ name: 'details', params: { id: '001' } })
}
}
}
注意，如果提供了 path ， params 會被忽略：
// `params` 不能與 `path` 一起使用
router.push({ path: '/details', params: { id: '001' } }) // -> /details
組件獲取數(shù)據(jù)
當(dāng)一個路由被匹配時，它的 params 的值將在每個組件中以 this.$route.params 的形式暴露出來。
const Details = {
template: '<div>Details {{ $route.params.id }} </div>',
created() {
// 監(jiān)聽路由變化
this.$watch(
() => this.$route.params,
(toParams, previousParams) => {
// 對路由變化做出響應(yīng)...
}
)
},
}
2. 通過 query 傳遞
這種情況下 query （查詢參數(shù)）傳遞的參數(shù)會顯示在 url 后面，如： /details/001?kind=car 。
路由配置
使用 query 時，以下三種方式都是可行的：
this.$router.push('/details/001?kind=car')
this.$router.push({ path: '/details/001', query: { kind: "car" }})
this.$router.push({ name: 'details', params: { id: '001' }, query: { kind: 'car' }})
組件獲取數(shù)據(jù)
組件通過 $route.query 獲?。?/p>
const Details = {
template: '<div>Details {{ $route.query.kind }} </div>',
created() {
// 監(jiān)聽路由變化
this.$watch(
() => this.$route.query,
(toParams, previousParams) => {
// 對路由變化做出響應(yīng)...
}
)
},
}
要對同一個組件中參數(shù)的變化做出響應(yīng)的話，你可以簡單地 watch $route 對象上的任意屬性，在這個場景中，就是 $route.query 。
3. 通過 hash 傳遞
通過此方式，url 路徑中帶有 hash ，例如： /details/001#car 。
路由配置
使用 hash 時，以下三種方式都是可行的（同 query ）：
this.$router.push('/details/001#car')
this.$router.push({ path: '/details/001', hash: '#car'})
this.$router.push({ name: 'details', params: { id: '001' }, hash: 'car'})
組件獲取數(shù)據(jù)
組件通過 $route.hash.slice(1) 獲取：
const Details = {
template: '<div>Details {{ $route.hash.slice(1) }} </div>',
}
通過 props 進行傳遞
在組件中使用 $route 會與路由緊密耦合，這限制了組件的靈活性，因為它只能用于特定的 URL。雖然這不一定是件壞事，但我們可以通過 props 配置來解除這種行為。
以解耦的方式使用 props 進行參數(shù)傳遞，主要是在路由配置中進行操作。
1. 布爾模式
當(dāng) props 設(shè)置為 true 時， route.params 將被設(shè)置為組件的 props。
例如下面的代碼是通過 $route 的方式獲取動態(tài)字段 id ：
const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
const routes = [{ path: '/user/:id', component: User }]
將上面的代碼替換成 props 的形式，如下：
const User = {
props: ['id'], // 組件中通過 props 獲取 id
template: '<div>User {{ id }}</div>'
}
// 路由配置中，增加 props 字段，并將值 設(shè)置為 true
const routes = [{ path: '/user/:id', component: User, props: true }]
注意：對于有命名視圖的路由，你必須為每個命名視圖定義 props 配置：
const routes = [
{
path: '/user/:id',
components: { default: User, sidebar: Sidebar },
// 為 User 提供 props
props: { default: true, sidebar: false }
}
]
2. 對象模式
當(dāng) props 是一個對象時，它將原樣設(shè)置為組件 props。當(dāng) props 是靜態(tài)的時候很有用。
路由配置
const routes = [
{
path: '/hello',
component: Hello,
props: { name: 'World' }
}
]
組件中獲取數(shù)據(jù)
const Hello = {
props: {
name: {
type: String,
default: 'Vue'
}
},
template: '<div> Hello {{ name }}</div>'
}
<Hello /> 組件默認(rèn)顯示 Hello Vue，但路由配置了 props 對象，當(dāng)路由跳轉(zhuǎn)到 /hello 時，會顯示傳遞過來的 name ， 頁面會顯示為 Hello World。
3. 函數(shù)模式
可以創(chuàng)建一個返回 props 的函數(shù)。這允許你將參數(shù)轉(zhuǎn)換為其他類型，將靜態(tài)值與基于路由的值相結(jié)合等等。
路由配置
使用函數(shù)模式時，返回 props 的函數(shù)接受的參數(shù)為路由記錄 route 。
// 創(chuàng)建一個返回 props 的函數(shù)
const dynamicPropsFn = (route) => {
return { name: route.query.say + "!" }
}
const routes = [
{
path: '/hello',
component: Hello,
props: dynamicPropsFn
}
]
組件獲取數(shù)據(jù)
當(dāng) URL 為 /hello?say=World 時， 將傳遞 {name: 'World!'} 作為 props 傳給 Hello 組件。
const Hello = {
props: {
name: {
type: String,
default: 'Vue'
}
},
template: '<div> Hello {{ name }}</div>'
}
此時頁面將渲染：
注意：請盡可能保持 props 函數(shù)為無狀態(tài)的，因為它只會在路由發(fā)生變化時起作用。如果你需要狀態(tài)來定義 props，請使用包裝組件，這樣 vue 才可以對狀態(tài)變化做出反應(yīng)。
其他方式
1. 通過 Vuex 進行傳遞
1. store 存儲狀態(tài)；
2. A 組件更改 store 中的狀態(tài)；
3. B 組件從 store 中獲取。
2. 通過前端本地存儲等方式
1. Local Storage;
2. Session Storage;
3. IndexedDB;
4. Web SQL;
5. Cookies。
到此這篇關(guān)于Vue 路由組件傳參的 8 種方式的文章就介紹到這了,更多相關(guān)Vue 路由組件傳參內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3警告:Failed to resolve component:XXX的詳細解決辦法
最近在一個vue3項目中遇到了報錯,整理了些解決辦法,這篇文章主要給大家介紹了關(guān)于Vue3警告:Failed to resolve component:XXX的詳細解決辦法,文中介紹的非常詳細,需要的朋友可以參考下2023-05-05
彈窗效果是在Web開發(fā)中經(jīng)常用到的一種交互效果,它可以在用戶點擊某個按鈕或者觸發(fā)某個事件時顯示一個懸浮框,提供用戶與頁面進行交互的機會,這篇文章主要給大家介紹了關(guān)于vue寫一個全局彈窗組件通過js調(diào)用的方法,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了Vue基礎(chǔ)-匿名插槽與作用域插槽的合并和覆蓋行為 ,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
這篇文章主要為大家介紹了前端vue架構(gòu)插槽slot使用教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-02-02
這篇文章主要介紹了Vue如何提升首屏加載速度實例解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-06-06
VueX學(xué)習(xí)之modules和namespacedVueX詳細教程
這篇文章主要為大家介紹了VueX學(xué)習(xí)之modules和namespacedVueX詳細教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
這篇文章給大家介紹基于vue實現(xiàn)循環(huán)滾動列表功能，給大家介紹了該組件的用法，通過實例代碼給大家介紹的非常詳細，需要的朋友參考下吧2021-09-09
這篇文章主要介紹了vue項目優(yōu)化首評加載速度，以及白屏?xí)r間過久的問題，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09
Vue3中的ref和reactive響應(yīng)式原理解析
這篇文章主要介紹了Vue3中的ref和reactive響應(yīng)式,本節(jié)主要介紹了響應(yīng)式變量和對象，以及變量和對象在響應(yīng)式和非響應(yīng)式之間的轉(zhuǎn)換，需要的朋友可以參考下2022-08-08
vue-mugen-scroll組件實現(xiàn)pc端滾動刷新
這篇文章主要為大家詳細介紹了vue-mugen-scroll組件實現(xiàn)pc端滾動刷新，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08