Vue Router4 嵌套路由的示例代碼
在 Vue Router 4 中，嵌套路由是一種非常重要的功能，它允許我們創(chuàng)建更復(fù)雜的 UI 結(jié)構(gòu)，同時(shí)保持路由的清晰和易于管理。
基本用法
要?jiǎng)?chuàng)建一個(gè)嵌套路由，我們可以在路由配置中添加一個(gè) children 屬性，這個(gè)屬性是一個(gè)數(shù)組，包含了所有的子路由。例如：
const routes = [
{
path: '/user/:id',
component: User,
children: [
{
path: 'profile',
component: UserProfile
},
{
path: 'posts',
component: UserPosts
}
]
}
]在這個(gè)例子中，當(dāng)我們?cè)L問(wèn) /user/1/profile 的時(shí)候，UserProfile 組件會(huì)被渲染；當(dāng)我們?cè)L問(wèn) /user/1/posts 的時(shí)候，UserPosts 組件會(huì)被渲染。這兩個(gè)組件都是 User 組件的子組件，它們會(huì)被渲染在 User 組件的 <router-view> 中。
嵌套路由的參數(shù)傳遞
在嵌套路由中，我們可以在父路由中定義參數(shù)，然后在子路由中訪問(wèn)這些參數(shù)。例如：
const User = {
template: `
<div>
<h2>User {{ $route.params.id }}</h2>
<router-view></router-view>
</div>
`
}
const UserProfile = {
template: '<div>UserProfile {{ $route.params.id }}</div>'
}在這個(gè)例子中，UserProfile 組件可以訪問(wèn)到父路由中定義的 id 參數(shù)。
以上就是嵌套路由的基本用法和一些重要的特性。在實(shí)際的開發(fā)中，我們可以根據(jù)項(xiàng)目的需要，靈活地使用嵌套路由來(lái)創(chuàng)建復(fù)雜的 UI 結(jié)構(gòu)。
相關(guān)文章
Vue3前端項(xiàng)目實(shí)現(xiàn)動(dòng)態(tài)顯示當(dāng)前系統(tǒng)時(shí)間詳解
在 Vue3 項(xiàng)目中,動(dòng)態(tài)顯示當(dāng)前系統(tǒng)時(shí)間是一個(gè)常見的需求,本文將詳細(xì)介紹如何使用 Vue3 的 ref 和生命周期鉤子實(shí)現(xiàn)一個(gè)高效、可維護(hù)的動(dòng)態(tài)時(shí)間顯示組件,有需要的小伙伴可以了解一下2025-07-07
這篇文章主要為大家詳細(xì)介紹了vue監(jiān)聽用戶輸入和點(diǎn)擊功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了Vue3圖片未加載成功前占位的問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-06-06
Vue 第三方字體圖標(biāo)引入 Font Awesome的方法
今天小編就為大家分享一篇Vue 第三方字體圖標(biāo)引入 Font Awesome的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了Vue中的循環(huán)遍歷與key值原理，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue在.js文件中如何進(jìn)行路由跳轉(zhuǎn)
這篇文章主要介紹了vue在.js文件中如何進(jìn)行路由跳轉(zhuǎn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
vue 使某個(gè)組件不被 keep-alive 緩存的方法
今天小編就為大家分享一篇vue 使某個(gè)組件不被 keep-alive 緩存的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue網(wǎng)絡(luò)請(qǐng)求的三種實(shí)現(xiàn)方式介紹
這篇文章主要介紹了Vue網(wǎng)絡(luò)請(qǐng)求的三種實(shí)現(xiàn)方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09
Vue實(shí)現(xiàn)當(dāng)前頁(yè)面刷新的七種方法總結(jié)
大家在vue項(xiàng)目中當(dāng)刪除或者增加一條記錄的時(shí)候希望當(dāng)前頁(yè)面可以重新刷新，但是vue框架自帶的router是不支持刷新當(dāng)前頁(yè)面功能,所以本文就給大家分享了七種vue實(shí)現(xiàn)當(dāng)前頁(yè)面刷新的方法,需要的朋友可以參考下2023-07-07
詳解VS Code使用之Vue工程配置format代碼格式化
這篇文章主要介紹了詳解VS Code使用之Vue工程配置format代碼格式化，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03