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í)際的開(kāi)發(fā)中，我們可以根據(jù)項(xiàng)目的需要，靈活地使用嵌套路由來(lái)創(chuàng)建復(fù)雜的 UI 結(jié)構(gòu)。
相關(guān)文章
vue項(xiàng)目中?jsconfig.json概念及使用步驟
這篇文章主要介紹了vue項(xiàng)目中?jsconfig.json是什么,本文僅僅簡(jiǎn)單介紹了?jsconfig?.json?的一些基本配置，而?jsconfig?.json提供了大量能使我們快速便捷提高代碼效率的方法，需要的朋友可以參考下2022-07-07
文章介紹了在某些場(chǎng)景下,需要根據(jù)動(dòng)態(tài)數(shù)據(jù)來(lái)設(shè)置ref,例如在表格中的輸入框需要聚焦時(shí),需要為每個(gè)輸入框設(shè)置一個(gè)ref,通過(guò)點(diǎn)擊編輯按鈕,可以自動(dòng)聚焦到相應(yīng)的輸入框中2024-12-12
這篇文章主要介紹了vue 如何開(kāi)啟或關(guān)閉熱更新，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue組件通信傳值操作,結(jié)合實(shí)例形式分析了vue.js父子組件通信及兄弟組件通信相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
這篇文章主要介紹了vue項(xiàng)目中onscroll的坑及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue3中ts語(yǔ)法使用element plus分頁(yè)組件警告錯(cuò)誤問(wèn)題
這篇文章主要介紹了vue3中ts語(yǔ)法使用element plus分頁(yè)組件警告錯(cuò)誤問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要介紹了vue中的v-if和v-show的區(qū)別詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Vue實(shí)現(xiàn)左右菜單聯(lián)動(dòng)實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)左右菜單聯(lián)動(dòng)實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
關(guān)于Uncaught(in?promise)TypeError:?list?is?not?iterable報(bào)錯(cuò)
這篇文章主要給大家介紹了關(guān)于Uncaught(in?promise)TypeError:?list?is?not?iterable報(bào)錯(cuò)的解決方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08
VUE-ElementUI?時(shí)間區(qū)間選擇器的使用
這篇文章主要介紹了VUE-ElementUI?時(shí)間區(qū)間選擇器的使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05