今天想來聊聊 Vue Router。

Vue Router 是由前端實作的路由，有了它，就可以透過前端操控路由，打造一個前端 SPA*。在過往路由需要先經過網路（Internet），並透過後端伺服器，進行請求與回應的動作，才能顯示路由指定的頁面，但是透過 Vue Router，就不一定需要網路與後端，也能渲染這個路由指定的頁面。

SPA 為 Single-page Application 的簡寫。指的是「不跳頁」的網頁設計原則，例如著名的 Gmail。所以你在用 Gmail 的時候，會感覺好像「在用一個 App」而不是在用「網頁」，因為頁面之間跳轉的很流暢，而不像一般網站一樣在操作過程需要不斷重整頁面。

使用 Vue Router 時，當我們想變更路由，會經過以下的步驟：

  1. 啟動 Vue Router
  2. 藉由 JavaScript 動態更改網址
  3. 載入對應的 component
  4. 渲染顯示頁面

但是當需要使用到資料的增刪改查（CRUD）的動作時，就需要進一步透過網路，向後端伺服器發送請求(也就是串接後端 API)

如何開始用 Vue Router？

當你已經開了一個 vue 專案後，可以透過以下指令安裝 Vue Router。

vue add router

在安裝的過程中，會出現是否選擇 History Mode 的選項。 若選擇否，則會套用 Hash Mode。這兩種模式的差異，等等會詳細說明，建議先選擇 Hash Mode。

圖片來自 ALPHA Camp

安裝好之後，來觀察看看專案下哪邊變得不同了。

  1. 網址多了 # 符號，此處與設定 Hash Mode 有關，詳看頁尾解釋。
  2. 網頁最上方多了可以切換路由的導覽列
  3. 專案多了 router（使用裡面的 index.js 檔案來設定路由）、views（擺放可以被 index.js 使用的頁面元件。通常一個路由會對應到一個 views 裡面的 component）的資料夾。

如何設定路由？

讓我們從 router 資料夾裡面的 index.js 開始著手。

將這個檔案打開後，可以看到有一個 routes 陣列。裡面可以設定路由，而設定的方法就是寫下 path(網址)、name(路由名稱)、component(對應到的元件名稱)。

這裡你可能會發現到在程式碼中，透過 import 載入 Home 頁面和載入 About 頁面的方式不太一樣，Home.vue 的載入路徑寫在檔案的最上方，這代表 Home.vue 在每次載入路由時，都會一併載入。

而 About.vue 的情況，是把 import 寫在 component 屬性內，在有人到達 /about 這組路由時，才會執行 component 裡的 function，動態載入需要的檔案。這樣的寫法可以減少不必要的流量：如果使用者沒有到達這裡、那就不用預先載入這頁的組件內容。

在 App.vue 這個檔案中的 <router-veiw /> 也就是透過 view-router 渲染之元件所顯示的位置。

router-link 的用途則是與 <a herf=””> 標籤有點相似，但是是透過 View Router 去尋找對應連結。

補充：Hash Mode 和 History Mode

Hash Mode

使用 Hash Mode 時，當連結有變動，會觸發 onhashchange 事件，vue 就會渲染對應的 component。在此模式下，瀏覽器會向根目錄發出請求，再透過 # 分辨不同的路由，且不會重新載入。每當改變 # 後面的部分時，會在瀏覽器的訪問歷史中增加紀錄，如此一來我們就可以透過上一頁的按鈕，重返上一頁。

History Mode

使用 History Mode 時，雖然網址不會顯示 # 符號，看起來是常見的網址，但若未對伺服器或 CDN 進行相關的設定，在對外佈署後，就會發生手動變更網址、或是重整頁面時，連到 404 的錯誤頁面。

為什麼會有這種狀況呢？

因為用前端路由做出來的 SPA 網頁只有首頁，其他頁面則是透過 JavaScript 動態渲染。

為了取得 JavaScript 的內容，必須從首頁開始載入。可是在 History Mode 下，Vue 幫我們設定好開發環境，再以 window.history.pushState() 來實現新增歷史紀錄、以及不會重新載入的效果。所以若是脫離 Vue 的開發環境，又沒做額外設定的話，就會發生問題。