18. 巢狀路由

若網頁需要子路徑時，例如前面的 "Hello.vue" 裡面要再區分成 "Children1" 和 "Children2" 兩個部分，點擊路徑時可分別讀取到這些內容，可依以下步驟建立：

1. 新增子組件檔案 (.vue)
2. 載入到 "router.js"
3. 到父組件加上路徑連結

1. 新增子組件檔案

• 在 src > views 資料夾底下，新增 "Children1.vue" 和 "Children2.vue" 檔案，並撰寫內容。
• 要注意 component 的 template 最外面只能有一層 DOM。

Children1.vue

<template>
  <div>
    <p>This is children component 01.</p>
  </div>
</template>

Children2.vue

<template>
  <div>
    <p>This is children component 02.</p>
  </div>
</template>

2. 載入到 "router.js"

• 在 "router.js" 中，管理 "Hello.vue" 的物件裡，加上 children 屬性。
• 在 children 屬性裡面，放上 "Children1.vue" 和 "Children2.vue" 的路徑、名稱以及對應的組件。
• 要注意子路由的路徑不要用 / 開頭，這樣會回到根目錄。
• 子組件的載入方法和父組件，兩種方法都能使用。

import Children1 from '../views/Children1.vue'

{
    path: '/hello',
    name: 'Hello',
    component: () => import( /* webpackChunkName: "hello" */ '../views/Hello.vue'),
    children: [
      {
        path: 'children1',
        name: 'Hello-Children1',
        component: Children1
      },
      {
        path: 'children2',
        name: 'Hello-Children2',
        component: () => import( /* webpackChunkName: "Children2" */ '../views/Children2.vue')
      }
    ]
}

3. 到父組件加上路徑連結

• 在 "Hello.vue" 裡面用 router-link 和 router-view 來分別呈現子路由的連結和畫面。
• router-link 裡面的 to 為該連結要導向的網址。類似 a 標籤和 src 屬性的關係。

//- Hello.vue

<template>
  <div>
    <h1>Hello, this is Hello.vue component.</h1>
    <dev id="nav">
      <router-link to="/hello/children1">Children1</router-link>|
      <router-link to="/hello/children2">Children2</router-link>
    </dev>
    <router-view />
  </div>
</template>

若路由越來越多層、網址越來越長，除了上面的寫法，我們也可以綁定 to ，導向 "router.js" 裡面對應路由的 name，這是第二種寫法。

//- Hello.vue

<template>
  <div>
    <h1>Hello, this is Hello.vue component.</h1>
    <dev id="nav">
      <router-link :to="{ name: 'Hello-Children1' }">Children1</router-link>|
      <router-link :to="{ name: 'Hello-Children2' }">Children2</router-link>
    </dev>
    <router-view />
  </div>
</template>

如果成功，結果如下：

Children1 畫面

Children2 畫面