Vue 3 入門指南：掌握 Vue Router 靜態路由設定

在開發單頁應用程式（SPA）時，路由管理是不可或缺的一環。本文將帶領您從零開始，完成 Vue Router 的基本環境設定，並學會如何建立穩健的靜態路由架構。

規劃檔案架構

在開始撰寫程式碼前，良好的目錄規劃能提升專案的可維護性。建議在 src 目錄下新增 router 與 views 目錄：

• router/：存放路由設定檔。
• views/：存放對應路由的頁面元件。

src/
 ├─ router/
 │   └─ index.js    # 路由核心配置
 ├─ views/
 │   ├─ Home.vue    # 首頁元件
 │   └─ About.vue   # 關於頁面元件
 ├─ App.vue         # 根元件（包含導覽與渲染區）
 └─ main.js         # 應用程式入口

建立頁面元件 (Views)

首先，我們準備兩個基礎頁面內容，分別是「首頁」與「關於我們」。

Home.vue

<template>
  <h1>Home</h1>
  <p>這是專案的首頁內容。</p>
</template>

About.vue

<template>
  <h1>About</h1>
  <p>這是關於我們的頁面說明。</p>
</template>

設定 Vue Router 路由配置

在 /router/index.js 中，我們需要定義路由的模式與對應路徑。

選擇路由模式：History vs Hash

• Hash: createWebHashHistory() 優點是不需要有後端設定，缺點為 URL 中會有 #，較不符合主流的使用。
• History (推薦): createWebHistory() 優點符合主流使用，缺點是需要後端伺服器配合處理 fallback，如: IIS、Apache、Nginx。

路由設定程式碼

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

export default createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: "/",
      name: "home",
      component: () => import("@/views/Home.vue"),
    },
    {
      path: "/about",
      name: "about",
      component: () => import("@/views/About.vue"),
    },
    {
      path: "/:pathMatch(.*)*",
      redirect: "/",
    },
  ],
});

什麼是 路由匹配是由上而下的，因此此設定務必放在 routes 陣列的最末端。？

這是一個特殊的正則匹配語法，通常用來處理 未匹配的路由。

• 代表動態參數，也就是把匹配到的路徑 存到一個叫 pathMatch 的參數裡。例如：/abc/def 變成 route.params.pathMatch。
• (.*): 它是個正規表達式，意思是 匹配任何字元。
• *: 為 Vue Router 的特殊語法，表示可以 匹配多層路徑。例如：/abc、/abc/def、/abc/def/ghi。

WARNING

路由匹配是由上而下的，因此，/:pathMatch(.*)* 務必放在 routes 陣列的最末端。

註冊並啟動路由

在 main.js 中匯入我們寫好的路由物件，並使用 .use() 進行安裝。

...
import { createApp } from 'vue';
import App from './App.vue';
import router from './router'; // 匯入路由設定

const app = createApp(App);
app.use(router); // 掛載路由
app.mount('#app');

在頁面中呈現路由內容

最後，我們在 App.vue 使用 Vue Router 提供的核心元件來實作導覽功能。

• <router-link>: 渲染為 <a> 標籤，點擊時切換路由而不重新整理頁面。
• <router-view>: 動態顯示目前路由所對應的元件內容。

<template>
  <router-link to="/">Home</router-link>｜
  <router-link to="/about">About</router-link>
  <RouterView />
</template>

結語

透過以上五個步驟，您已經成功建立了一個具備基本導航與 404 容錯機制的 Vue 3 路由環境。建議在實際專案中，將 404 導向一個專門的 NotFound.vue 頁面，能提供更好的使用者體驗。