在完成了登入驗證這項艱鉅的任務後，使用者終於能進入我們系統的內部了！但一個應用程式如果只有一個頁面，那未免也太單調了。

所以在我們的銷售系統中，使用者需要在「儀表板」、「訂單管理」、「庫存查詢」等多個功能頁面之間自由切換，這就需要一個強大的「導航系統」。

今天，我們將深入理解在 Vue 中，是如何實現頁面切換的，也就是「路由（Routing）」機制。我們將會認識 Vue 的官方路由函式庫 vue-router，並解析我們專案中是如何運用它來搭建整個應用的骨架。

SPA 與傳統網站的區別

在開始之前，我們需要先理解一個核心概念：SPA (Single Page Application，單頁應用)。

• 傳統網站 (MPA)：你每點擊一個連結（例如從首頁到商品頁），瀏覽器都會向伺服器發送一個全新的請求，然後伺服器回傳一整個新的 HTML 檔案，整個頁面重新載入。你會看到瀏覽器標籤頁上有個小圈圈在轉。

• 單頁應用 (SPA)：你第一次載入網站時，會下載一個 HTML 和主要的 JavaScript 檔案。之後，當你點擊連結切換頁面時，頁面不會重新載入。實際上，是 JavaScript 在幕後動態地卸載舊的元件、載入新的元件，並悄悄地改變瀏覽器的網址列。這一切都發生在同一個頁面中，所以稱為「單頁應用」。它的好處是速度快、體驗流暢，更像是應用程式。

我們的 Vue 專案就是一個 SPA，而負責管理這一切幕後工作的，正是 vue-router。

Vue Router 的核心概念

vue-router 是 Vue 的官方路由管理器。它能讓我們將「URL 路徑」與「Vue 元件」進行映射。當使用者訪問某個路徑時，vue-router 就會自動將對應的元件渲染到指定的位置。

讓我們來看看專案中的 src/router/index.js，這是我們整個導航系統的心臟。

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import LoginView from '../view/LoginView.vue'
import DashBoard from '../view/DashBoard.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      redirect: '/login'
    },
    {
      path: '/login',
      name: 'login',
      component: LoginView
    },
    {
      path: '/dashboard',
      name: 'dashboard',
      component: DashBoard
    }
  ]
})

export default router

這裡有幾個關鍵點：

1. createRouter：這是 vue-router 的初始化函式，我們傳入一個設定物件來建立一個路由器實例。

2. history 模式：我們使用了 createWebHistory()。這啟用了 HTML5 History 模式，它利用瀏覽器的 history.pushState API 來改變 URL 而不重新載入頁面。這讓我們的 URL 看起來很乾淨（例如 https://example.com/dashboard），但它需要伺服器端做對應設定，以確保使用者在 /dashboard 頁面重新整理時，伺服器依然能正確地回傳主 index.html 檔案。

3. routes 陣列：這是最重要的部分，它定義了所有的「路由規則」。每一條規則都是一個物件，用來描述一個路徑應該對應哪個元件。

   • path: URL 的路徑。
   • component: 當 path 被匹配時，要渲染的 Vue 元件。
   • name: 路由的具名，方便我們在程式中透過名字來導航，而不是寫死的路徑。
   • redirect: 一個重新導向規則。在我們的例子中，當使用者訪問根路徑 / 時，會被自動重新導向到 /login。

路由系統的串聯

光有 router/index.js 是不夠的，它需要被串接到整個 Vue 應用中才能生效。

1. 在 main.js 中掛載路由器

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 引入我們建立的路由器

const app = createApp(App)

app.use(router) // 將路由器實例掛載到 Vue 應用上

app.mount('#app')

app.use(router) 賦予了我們整個應用程式進行路由導航的能力。

2. 在 App.vue 中設定渲染出口

那麼，vue-router 該把匹配到的元件（如 LoginView 或 DashBoard）渲染在哪裡呢？答案就在 App.vue。

// src/App.vue
<template>
  <router-view />
</template>

<router-view /> 是一個由 vue-router 提供的特殊元件，它就像一個「佔位符」或「渲染出口」。vue-router 會根據當前的 URL，自動將匹配到的元件內容，渲染在這個 <router-view> 的位置。

3. 觸發導航

我們有兩種主要方式來觸發頁面導航：

• 宣告式導航：使用 <router-link> 元件，它會被渲染成一個 <a> 標籤。

  <router-link to="/dashboard">前往主頁</router-link>
  

• 編程式導航：在 JavaScript 程式碼中呼叫路由器的方法。

  // 在 setup 中
  import { useRouter } from 'vue-router';
  const router = useRouter();
  
  function goToDashboard() {
    router.push('/dashboard');
  }
  
  function logout() {
    router.push('/login'); // DashBoard.vue 中的登出邏輯
  }
  

總結

今天，我們揭開了 SPA 路由的神秘面紗，理解了 vue-router 是如何作為我們應用的導航中樞來運作的。我們學到了：

1. SPA 透過 JavaScript 動態切換元件來模擬頁面跳轉，提供了流暢的使用者體驗。
2. router/index.js 是定義「路徑」與「元件」映射關係的核心檔案。
3. main.js 中的 app.use(router) 負責將路由功能注入整個應用。
4. App.vue 中的 <router-view /> 是決定元件被渲染在哪裡的出口。
5. 我們可以使用 <router-link> 或 router.push() 來觸發頁面導航。

現在，我們的應用有了骨架，使用者可以在登入頁和儀表板之間跳轉了。但這也引出了一個新問題：任何知道 /dashboard 路徑的人，是不是就算不登入也能直接訪問呢？

明日，Day 19：[Routerの呼吸・貳之型] 路由守衛 - 權限控制與保護。心を燃やせ 🔥！