[Vue Router] 巢狀路由

TL;DR

介紹Vue Router的巢狀路由。

前置作業

範例會使用到Bootstrap的元件，所以需要先將Bootstrap給引入使用。

(引入Bootstrap參考)

參考資料

相關連結

---

新增元件

首先新增兩個元件：

./src/components/ComponentA.vue

<template>
  <p>元件A</p>
</template>

./src/components/ComponentB.vue

<template>
  <p>元件B</p>
</template>

設定路由(routes)

接著到index.js內，調整我們要新增的子路由。

新增子路由的方式為，在路由物件下面新增一個children的屬性，內容為一個陣列，陣列內再額外設定需要對應的子路由路徑。（格式與上層相同，依此類推）

./src/router/index.js

import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue')
    },
    {
      path: '/newpage',
      name: '新增頁面',
      component: () => import('../views/NewPage.vue'),
      children: [
        {
          path: 'a',
          name: '新增頁面內的元件A',
          component: ()=> import('../components/ComponentA.vue')
        },
        {
          path: 'b',
          name: '新增頁面內的元件B',
          component: ()=> import('../components/ComponentB.vue')
        },
      ]
    }
  ]
})

export default router

修改NewPage.vue

在前面已經有創建一個新增頁面。

這邊重新撰寫加上一個Bootstrap的隔線系統區分左右兩側，分別為：

• 左側：List group
• 右側：RouterView

之後就可以透過左側的選單，來切換目前的路由以及右側RouterView要顯示的內容。

./src/views/NewPage.vue

<template>
  <div class="container">
    <div class="row py-3">
      <div class="col-3">
        <div class="list-group">
          <RouterLink :to="{name:'新增頁面內的元件A'}" class="list-group-item list-group-item-action" aria-current="true">
            元件A
          </RouterLink>
          <RouterLink to="/newpage/b" class="list-group-item list-group-item-action">
            元件B
          </RouterLink>
        </div>
      </div>
      <div class="col-9">
        <RouterView></RouterView>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {
  }
}
</script>