前言
想象一下杀狡，這里有一個(gè)組件，組件頂部是三個(gè)按鈕贰镣，主體是展示區(qū)域呜象，通過(guò)按鈕可以切換展示區(qū)域不同的組件（也可以是同一組件，這取決于你）并展示不同的內(nèi)容碑隆。大組件嵌套小組件恭陡，并且大組件也是通過(guò) <router-view>渲染的。那這種組件嵌套組件的形式上煤，是如何實(shí)現(xiàn)的呢子姜？
嵌套路由
如果你有一定經(jīng)驗(yàn)。想必已經(jīng)有答案了楼入。但還是有必要說(shuō)一說(shuō)。
回顧一下我們?cè)谄鸩綍r(shí)牧抽，<router-view>所放置的位置嘉熊，是在App.vue文件里。因?yàn)?code>App.vue是項(xiàng)目根組件扬舒，其<router-view>屬于第一級(jí)別阐肤，那有沒有第二、第三級(jí)別的<router-view>呢？答案是有的孕惜。
先來(lái)明確一個(gè)概念愧薛，<router-view>與路由表中的路徑是對(duì)應(yīng)的，一般還是一一對(duì)應(yīng)的衫画。
// 路由表
const routes = [
{
path: '/home',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
正如上面代碼顯示的毫炉，Home組件對(duì)應(yīng)路徑/home。如果存在第二級(jí)<router-view>削罩，那是不是也存在與他匹配的路由路徑瞄勾？
Vue 的設(shè)計(jì)就是如此顯而易見且符合邏輯。路由的級(jí)別與它自身的嵌套層級(jí)一一對(duì)應(yīng)：
// 路由表
const routes = [
{
path: '/home',
name: 'Home',
component: Home,
children: [
{
path: '/about',
name: 'About',
component: About
},
{
path: '/detail',
name: 'Detail',
component: Detail
}
},
]
我們將上面的路由表稍微做了一下改變弥激，在/home路徑下新增一個(gè)children的路由列表进陡，并將/about放在了children里，這意味著/about路由成為了/home的子路由微服，當(dāng)我們?cè)贖ome組件內(nèi)部任意位置使用一個(gè)<router-view>時(shí)趾疚，這個(gè)<router-view>會(huì)自動(dòng)去匹配與它對(duì)應(yīng)的二級(jí)路由。
我們繼續(xù)在/about下新增一個(gè)/detail路由以蕴。在/home內(nèi)部使用兩個(gè)<router-link>標(biāo)簽：
<router-link to="/about" />
<router-link to="/detail" />
當(dāng)點(diǎn)擊這兩個(gè)標(biāo)簽時(shí)糙麦，其會(huì)自動(dòng)切換到對(duì)應(yīng)路由所對(duì)應(yīng)的組件，About組件與Detail組件相繼被渲染和切換舒裤。這兩個(gè)組件是嵌套在Home組件內(nèi)部的子組件喳资。
當(dāng)然，這種嵌套是允許更深層次的嵌套的腾供，但若不是項(xiàng)目需要仆邓，請(qǐng)不要這么做，這樣會(huì)讓路由表層級(jí)太深伴鳖，不利于維護(hù)节值。
