嵌套路由(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;
      }
    }
  }
}