Vue Router 4 快速上手

在上一章，我們用 50 行程式碼手刻了一個 Router。雖然很酷，但在真實專案中處理複雜的巢狀路由、權限守衛、參數傳遞時，我們絕對不想自己造輪子。

這也是為什麼 Vue Router 是 Vue 生態系中不可或缺的成員——它是官方維護的路由解決方案，與 Vue.js 核心深度整合。

本章將帶你完成從安裝到運作的標準流程。

---

一、 安裝 (Installation)

如果你的專案是用 npm init vue@latest (基於 Vite) 建立的，在選項中選擇 "Yes" 安裝 Router 後，它已經幫你配置好了。

如果是既有專案要手動加入，請執行：

npm install vue-router@4

WARNING

請注意：Vue Router 3 是給 Vue 2 用的。Vue 3 專案必須安裝 v4 版本。

---

二、 建立 Router 實體

在 src 目錄下建立一個 router/index.js (或 ts) 檔案。這是從 v3 到 v4 最大的改變：我們不再使用 new Router()，而是使用工廠函數 createRouter。

// src/router/index.js
import { createRouter, createWebHistory } from "vue-router";

// 1. 定義路由組件
const Home = { template: "<div>Home</div>" };
const About = { template: "<div>About</div>" };

// 2. 定義路由表
const routes = [
  { path: "/", component: Home },
  { path: "/about", component: About },
];

// 3. 建立 Router 實體
const router = createRouter({
  // 4. 指定路由模式 (必填)
  history: createWebHistory(import.meta.env.BASE_URL),
  routes, // routes: routes 的縮寫
});

export default router;

關鍵點解析

1. createRouter: 取代了 new VueRouter()。
2. createWebHistory: 對應我們上章提到的 History API (無 # 號)。如果你想要 Hash 模式，請改用 createWebHashHistory。
3. import.meta.env.BASE_URL: 這是 Vite 提供的環境變數，如果你的網站部署在子目錄 (例如 example.com/blog/)，它會自動加上前綴，避免路徑錯誤。

---

三、 在 Main.js 註冊

有了 Router 實體後，我們必須告訴 Vue App 去使用它。

// src/main.js
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router"; // 匯入剛建立的 router

const app = createApp(App);

// 關鍵一步：使用 use() 插件
app.use(router);

app.mount("#app");

一旦執行了 app.use(router)：

1. 整個 App 都會被注入路由功能。
2. 你可以在任何組件中使用 this.$router (Options API) 或 useRouter() (Composition API)。
3. 全域註冊了兩個組件：<router-link> 與 <router-view>。

---

四、 兩大核心組件

配置完成後，我們只需在 App.vue 中使用這兩個核心組件：

<!-- src/App.vue -->
<template>
  <nav>
    <!-- router-link: 用來導航 -->
    <!-- 它會被渲染成 <a href="..."> 但會攔截點擊事件，防止頁面刷新 -->
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>

  <!-- router-view: 路由出口 -->
  <!-- 配對到的組件 (Home 或 About) 會顯示在這裡 -->
  <router-view />
</template>

為什麼不用 <a> 標籤？

如果你寫 <a href="/about">About</a>，點擊時瀏覽器會發送請求並重新載入頁面。這就變成傳統網頁了 (上一章的史前時代)。

<router-link> 會自動處理這一切：它內部監聽 click 事件，呼叫 router.push()，只改變 URL 並更新視圖，實現無刷新跳轉。

---

五、 Composition API 初體驗

在 Vue 3 組件中，我們通常這樣使用路由：

<script setup>
  import { useRouter, useRoute } from "vue-router";

  const router = useRouter(); // 路由實體 (負責動作：跳轉)
  const route = useRoute(); // 當前路由資訊 (負責資料：參數、路徑)

  function goAbout() {
    // 程式化導航
    router.push("/about");
  }

  // 監聽當前路徑
  console.log(route.path);
</script>

• useRouter: 等同於 this.$router。用來執行操作 (push, replace, go)。
• useRoute: 等同於 this.$route。這是一個 Reactive Object，包含當前的 path, query, params。

---

總結

到這裡，你已經成功建立了一個具有路由功能的 Vue 應用！

1. 使用 createRouter 建立實體。
2. 使用 createWebHistory 開啟 History 模式。
3. 在 main.js 使用 app.use(router)。
4. 在 Template 使用 <router-link> 與 <router-view>。

下一章，我們將處理更真實的場景：動態路由。如果網址是 /user/123 這種帶參數的該怎麼寫？

下一章：動態路由與 404 處理