昨天我們學會了 表單與使用者輸入，不過目前我們的 Vue App 還停留在「單一頁面」的階段。
今天要開啟一條新的星際航線 —— Vue Router ！

為什麼需要 Vue Router？

• 沒有 Router 的 Vue App，其實就只有一個畫面（SPA）。
• Vue Router 幫你在「不同 URL」之間切換對應的畫面。
  ⭢ 就像太空船需要航線地圖，才能飛往不同星球（頁面）。

Vue Router 的基本概念：

• Route（航線）：URL 與元件的對應表。
• RouterView（航道顯示器）：畫面上顯示目前所在的元件。
• RouterLink（導航儀）：能讓你在不同航線（頁面）之間切換。

安裝 Vue Router

Vue 本體並沒有內建 Router，要額外安裝：

npm install vue-router@4

⚠️ 注意：Vue 3 對應的是 vue-router v4，千萬別裝成舊版（v3 是給 Vue 2 用的）。

如果你用 yarn：

yarn add vue-router@4

建立 Router 基本設定

通常會在 src/router/index.js 裡設定：

import { createRouter, createWebHistory } from 'vue-router'

// 匯入你要切換的頁面元件
import Home from '../views/Home.vue'
import About from '../views/About.vue'

// 定義「航線表」
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

// 建立 Router 實例
const router = createRouter({
  history: createWebHistory(), // 使用瀏覽器原生的 history 模式
  routes
})

export default router

建立要切換的頁面

這次我們先建立 src/views/Home.vue 和 src/views/About.vue ：
src/views/Home.vue：

<template>
  <section style="padding:16px">
    <h1>🏠 Home</h1>
    <p>這是首頁。</p>
  </section>
</template>

src/views/About.vue：

<template>
  <section style="padding:16px">
    <h1>✨ About</h1>
    <p>這是關於頁。</p>
  </section>
</template>

在應用中掛載 Router

到 main.js 裡，把 router 接上去：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App)
  .use(router)   // ⬅️ 把 router 插進 Vue 應用
  .mount('#app')

在畫面中使用 Router

最後，在 App.vue 裡加上導航和視圖容器：

<template>
  <div>
    <nav>
      <RouterLink to="/">🏠 首頁</RouterLink>
      <RouterLink to="/about">✨ 關於</RouterLink>
    </nav>

    <!-- 在這裡顯示目前路由對應的元件 -->
    <RouterView />
  </div>
</template>

這樣就完成了最簡單的 Router 配置!

今日重點複習

• 安裝：npm install vue-router@4
• 建立路由表：URL ↔ 元件對應。
• 掛載 Router：在 main.js 裡 .use(router)。
• 使用 RouterLink 與 RouterView：在畫面上切換不同元件。

明天 Day 17，我們會來一個實戰範例：製作一張 星際地圖，點選不同星球連結，就能進入對應的介紹頁。

參考資源
https://vuejs.org/guide
https://www.runoob.com/vue3