Vue Router 完全入門：建構流暢的單頁應用 (SPA) 導航
在現代前端開發中，Vue Router 是 Vue.js 官方提供的路由管理器。它將瀏覽器的 URL 與 Vue 元件綁定，讓開發者能在 單頁應用（SPA, Single-Page Application） 中，實現 不重新整理頁面 就能切換內容的流暢體驗。
為什麼需要 Vue Router？
傳統網頁在切換頁面時需要向伺服器請求整個 HTML 檔案，這會造成畫面閃爍與載入延遲。而 Vue Router 的核心特徵在於：
- 無刷新切換：僅替換頁面中的局部元件。
- 狀態同步：當 URL 更新時，畫面自動更新；當畫面切換時，URL 也隨之同步。
- 優化使用者體驗：提供類似原生 App 的操作手感。
傳統多頁式與 SPA 的差別
| 項目 | 傳統多頁式（MPA） | 單頁應用（SPA） |
|---|---|---|
| 換頁方式 | 向伺服器要一份新的 HTML | 前端替換元件，不再請求頁面 |
| 畫面感受 | 有白畫面與閃爍 | 順暢，接近原生 App |
| 首次載入 | 每頁各自載入，較輕 | 需先載入應用程式，較重 |
| 前端狀態 | 換頁後全部重置 | 換頁後仍保留在記憶體中 |
| SEO | 天生友善 | 需 SSR 或預渲染輔助 |
SPA 不是永遠比較好
換頁順暢的代價是 首次載入較重 與 SEO 需要額外處理。內容型網站（例如：官網、部落格）通常會搭配 SSR 或靜態生成；後台系統、會員中心這類重互動的應用，SPA 才是甜蜜點。
Vue Router 的核心功能
- 靜態路由 (Static Routes)：也就是 URL → 對應 View 元件，當網址改變時
<router-view />會自動渲染對應的畫面。例如：/about對應About.vue。當網址改變時，<router-view />標籤會自動渲染對應元件。 - 動態路由 (Dynamic Route Matching): 與上述類似，只是在 URL 中帶有變數、參數的路由。常用在使用者、商品、訂單、文章頁面。例如：
/user/:id。 - 巢狀路由 (Nested Routes): 在一個路由底下，再定義子路由，形成父子頁面結構。簡單講就是，頁面裡面還有子頁面
- 導航守衛 (Navigation Guards): 路由的攔截器。主要用於 權限控管，例如：判斷使用者是否已登入，若未登入則跳轉至登入頁面。
兩個核心元件
Vue Router 在畫面上其實只靠兩個元件運作：
<router-link>：渲染成<a>標籤，但會 攔截點擊 改由前端切換，不會重新載入整個應用程式。<router-view>：目前路由對應的元件會被渲染在這個位置，可以想成頁面的 顯示區。
若把 <router-link> 換成一般的 <a href="/about">，瀏覽器會重新請求頁面，SPA 累積的狀態也會全部歸零。
標準專案檔案結構
為了確保程式碼的可維護性，建議遵循 Vue 官方建議的結構，將路由配置與頁面元件分離：
src/
├─ router/
│ └─ index.js # 路由配置核心，僅存放路由對應表，不寫業務邏輯
├─ views/ # 存放頁面級元件（對應一個完整網址的元件）
│ ├─ Home.vue
│ └─ About.vue
├─ App.vue # 頂層元件，通常包含 <router-view />
└─ main.js # 專案進入點，在此掛載 Router- router/: 只會放路由相關設定，不放 API、商業邏輯。
- views/: 頁面相關的元件，也就是可以對應一個 URL 的元件。
至於被多個頁面重複引用的小元件，則放在 components/，這也是判斷 元件 該擺哪裡的簡單標準：能對應網址的是 view，被引用的是 component。
如何安裝 Vue Router？
您可以透過 npm 快速將 Vue Router 整合進您的專案中：
npm install vue-router
# 或簡寫
npm i vue-router安裝後還需要在 建立應用程式 的進入點以 app.use(router) 掛載，完整步驟會在 靜態路由 一併示範。
總結
Vue Router 是建構現代化網頁應用的基石。透過統一的路由管理，我們不僅能讓專案結構更清晰，還能輕鬆處理複雜的權限驗證與動態內容渲染。在接下來的章節中，我們將深入探討如何撰寫第一個 router/index.js 配置檔！
常見問題
什麼是單頁應用 SPA？
整個網站只載入一份 HTML，之後換頁由前端在瀏覽器中替換元件完成，不再向伺服器要新的頁面。優點是切換順暢，代價是首次載入的檔案較大。
router-link 和 a 標籤差在哪裡？
<router-link> 最終也會渲染成 <a> 標籤，但它會攔截點擊改由前端切換，不會重新載入整個應用程式。直接寫 <a> 標籤會讓瀏覽器重新請求頁面，SPA 的狀態也會全部重置。
views 和 components 目錄該怎麼分？
能對應一個網址的頁面級元件放 views，被頁面重複引用的小元件放 components。這樣看目錄就知道哪些檔案會出現在路由表裡。
Vue Router 需要另外安裝嗎？
需要，它不包含在 vue 套件裡，要用 npm install vue-router 安裝。若用 create-vue 建立專案時勾選了路由選項，指令與設定檔都會自動幫你準備好。
SPA 對 SEO 有影響嗎？
純前端渲染的內容需要爬蟲執行 JavaScript 才看得到，對 SEO 較不利。重視搜尋流量的網站通常會改用 SSR 或靜態生成，讓伺服器直接輸出完整 HTML。
