# Vue學習#28 巢狀路由
###### tags: `Vue 直播班 - 2022 春季班`

## 巢狀路由

顧名思義就是 一個路由下面還有路由連結其他地方，上圖範例為有一元件路徑 example ， 在這個路徑下還有兩個元件的路徑，一層一層的關係就叫做巢狀路由

## 實作

### 在 index.js 路由表中的某個路徑下新增 children:[]

語法:

在一個元件路徑下新增 children 陣列，在陣列裡面新增物件，物件內容跟其他新增路徑的方式一樣填入自定義路徑名稱跟元件檔案的路徑，不同的是 children 的自定義路徑不用加上 `/`

#### 範例

在 example 路徑下填入 ComponentA 跟 ComponentB 元件的路徑

### 在 example 元件下新增 router-link


<font color='red'> router-link 的路徑名稱記得要加入上一層的路徑名稱再填入自己的路徑名稱 ， ex: `/example/a` </font>
再加上 router-view 顯示內容

### 成功!