Vue Router 完全入門：建構流暢的單頁應用 (SPA) 導航

在現代前端開發中，Vue Router 是 Vue.js 官方提供的路由管理器。它將瀏覽器的 URL 與 Vue 元件綁定，讓開發者能在 單頁應用（SPA, Single-Page Application） 中，實現「不重新整理頁面」就能切換內容的流暢體驗。

為什麼需要 Vue Router？

傳統網頁在切換頁面時需要向伺服器請求整個 HTML 檔案，這會造成畫面閃爍與載入延遲。而 Vue Router 的核心特徵在於：

• 無刷新切換：僅替換頁面中的局部元件。
• 狀態同步：當 URL 更新時，畫面自動更新；當畫面切換時，URL 也隨之同步。
• 優化使用者體驗：提供類似原生 App 的操作手感。

Vue Router 的核心功能

• 靜態路由 (Static Routes)：也就是 URL → 對應 View 元件，當網址改變時 <router-view /> 會自動渲染對應的畫面。例如：/about 對應 About.vue。當網址改變時，<router-view /> 標籤會自動渲染對應元件。
• 動態路由 (Dynamic Route Matching): 與上述類似，只是在 URL 中帶有變數、參數的路由。常用在使用者、商品、訂單、文章頁面。例如：/user/:id。
• 巢狀路由 (Nested Routes): 在一個路由底下，再定義子路由，形成父子頁面結構。簡單講就是，頁面裡面還有子頁面
• 導航守衛 (Navigation Guards): 路由的攔截器。主要用於 權限控管，例如：判斷使用者是否已登入，若未登入則跳轉至登入頁面。

標準專案檔案結構

為了確保程式碼的可維護性，建議遵循 Vue 官方建議的結構，將路由配置與頁面元件分離：

src/
 ├─ router/
 │   └─ index.js      # 路由配置核心，僅存放路由對應表，不寫業務邏輯
 ├─ views/            # 存放「頁面級」元件（對應一個完整網址的元件）
 │   ├─ Home.vue
 │   └─ About.vue
 ├─ App.vue           # 頂層元件，通常包含 <router-view />
 └─ main.js           # 專案進入點，在此掛載 Router

• router/: 只會放路由相關設定，不放 API、商業邏輯。
• views/: 頁面相關的元件，也就是可以對應一個 URL 的元件。

如何安裝 Vue Router？

您可以透過 npm 快速將 Vue Router 整合進您的專案中：

npm install vue-router
# 或簡寫
npm i vue-router

總結

Vue Router 是建構現代化網頁應用的基石。透過統一的路由管理，我們不僅能讓專案結構更清晰，還能輕鬆處理複雜的權限驗證與動態內容渲染。在接下來的章節中，我們將深入探討如何撰寫第一個 router/index.js 配置檔！