嵌套路由(Nested Routes)

父層有 router-view 可以切換，內層也有自己的 router-view 可以切換

main.js

import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/Home.vue";
import About from "../views/About.vue";
import Changelog from "../views/About/Changelog.vue";
import GitHub from "../views/About/GitHub.vue";
import Guide from "../views/About/Guide.vue";
import aboutIndex from "../views/About/index.vue";
import Reference from "../views/About/Reference.vue";
const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: About,
    children: [
      {
        path: "", // children裡的路徑不需要斜線/
        component: aboutIndex
      },
      {
        path: "changelog",
        component: Changelog
      },
      {
        path: "gitHub",
        component: GitHub
      },
      {
        path: "guide",
        component: Guide
      },
      {
        path: "reference",
        component: Reference
      }
    ]
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

內層加上 router-view

about.vue

<div class="about">
  <nav>
    <router-link to="/about/changelog">changelog</router-link>
    <router-link to="/about/gitHub">gitHub</router-link>
    <router-link to="/about/guide">guide</router-link>
    <router-link to="/about/reference">reference</router-link>
  </nav>
  <main>
    <router-view/>
  </main>
</div>

.about {
  > nav {
    > a {
      margin: 0 10px;
      color: #2c3e50;
      font-weight: bold;
      &.router-link-exact-active {
        color: rebeccapurple;
      }
    }
  }
}

需注意的是，嵌套路由的router-link，class會自動產生router-link-active，router-link-active的下一層也會產生router-link-exact-active，可以利用此類別來設定active

以上是我的學習筆記，希望也有幫助到你哦 😀

🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Hahow

Hahow 有各式各樣類型的課程，而且是無限次數觀看，對學生或上班族而言，不用擔心被時間綁住

六角學院

如果你是初學者，非常推薦六角學院哦！
剛開始轉職也是上了六角的課，非常的淺顯易懂，最重要的是，隨時還有線上的助教幫你解決問題！

Udemy

Udemy 裡的課程非常的多，品質普遍不錯，且價格都滿實惠的，CP值很高！
也是很多工程師推薦的線上課程網站。

Lala Code

Vue 嵌套路由，幫網站設定 layout