vue-router實(shí)現(xiàn)嵌套路由的講解
一、嵌套路由（配置好父路由component后，在父路由下面添加children屬性來(lái)配置這個(gè)父路由的子路由）
需要注意的是：父組件中的<router-view></router-view>是子組件的占位符是必不可少的
嵌套路由的現(xiàn)象：點(diǎn)擊了路由跳轉(zhuǎn)之后父路由組件的內(nèi)容一直呈現(xiàn)；子路由的內(nèi)容進(jìn)行切換，地址欄的路徑也隨之改變。
// 嵌套路由
{
path: '/nest',
component: () => import('@/nest/nest'),
// 嵌套路由的關(guān)鍵字children，在父路由中添加children數(shù)組 中添加子路徑
children:[
{
// 要注意，以 / 開頭的嵌套路徑會(huì)被當(dāng)作根路徑,這讓你充分的使用嵌套組件而無(wú)須設(shè)置嵌套的路徑。如果這里的path的值為'/son1將無(wú)法渲染son1子組件'
path: 'son1',
component: () => import('@/nest/nest_son1')
},
]
}
上面子路由中加不加‘/' 的區(qū)別：當(dāng)去到son1的時(shí)候加 ‘/'會(huì)在地址欄中顯示 #/son1;不加 ‘/'的時(shí)候回在地址欄中顯示 #/nest/son1
注意：/xx就是根路徑
效果：
若有不足請(qǐng)多多指教！希望給您帶來(lái)幫助!
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請(qǐng)查看下面相關(guān)鏈接
相關(guān)文章
Vue3實(shí)現(xiàn)通過(guò)axios來(lái)讀取本地json文件
這篇文章主要介紹了Vue3實(shí)現(xiàn)通過(guò)axios來(lái)讀取本地json文件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
vue實(shí)現(xiàn)宮格輪轉(zhuǎn)抽獎(jiǎng)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)宮格輪轉(zhuǎn)抽獎(jiǎng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
詳解vue項(xiàng)目首頁(yè)加載速度優(yōu)化
這篇文章主要介紹了詳解vue項(xiàng)目首頁(yè)加載速度優(yōu)化，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
Vue3中簡(jiǎn)單實(shí)現(xiàn)動(dòng)態(tài)添加路由
本文主要介紹了Vue3中簡(jiǎn)單實(shí)現(xiàn)動(dòng)態(tài)添加路由，，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
vue全局實(shí)現(xiàn)數(shù)字千位分隔符格式
這篇文章主要為大家詳細(xì)介紹了vue全局實(shí)現(xiàn)數(shù)字千位分隔符格式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了vue實(shí)現(xiàn)登錄攔截，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
vue3使用Pinia修改state的三種方法(直接修改，$patch，actions)
Vue3?Pinia是一個(gè)狀態(tài)管理庫(kù),專門為Vue3設(shè)計(jì)優(yōu)化,它提供了一種簡(jiǎn)單而強(qiáng)大的方式來(lái)管理應(yīng)用程序的狀態(tài),并且與Vue3的響應(yīng)式系統(tǒng)緊密集成,本文給大家介紹了vue3使用Pinia修改state的三種方法,需要的朋友可以參考下2024-03-03
vue中封裝axios并實(shí)現(xiàn)api接口的統(tǒng)一管理
這篇文章主要介紹了vue中封裝axios并實(shí)現(xiàn)api接口的統(tǒng)一管理的方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
vue設(shè)置動(dòng)態(tài)請(qǐng)求地址的例子
今天小編就為大家分享一篇vue設(shè)置動(dòng)態(tài)請(qǐng)求地址的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
Vscode如何創(chuàng)建vue項(xiàng)目
這篇文章主要介紹了Vscode如何創(chuàng)建vue項(xiàng)目問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04