【前言】
本系列為個人前端學習之路的學習筆記，在過往的學習過程中累積了很多筆記，如今想藉著IT邦幫忙這個平台做整理+再複習。
本系列標題一律以【】標示該篇文章主要涉及的內容，例如【JavaScript】、【Vue】等等。
若內容有誤，還麻煩各路大神不吝於點出問題，感激不敬。

我們在使用 Vue Router 開發 SPA(單頁應用程式)時有 Hash 和 History 兩種模式

Hash Mode

hash 模式是 Vue Router 預設的形式
最大的特徵就是網址會帶上一個 #

https://example.com/#/

hash 模式的主要原理是透過 onhashchange() 事件
舉個例子

<a href="#a">a</a> //網址變成 https://example.com#a

當我們點擊錨點時，網址會加上 # 並跳轉到該位置
並且跳轉到網頁中 id 為 a 的 Dom 元素位置
而這個過程是瀏覽器自己的功能，既不會刷新頁面也並不會向後端發送任何東西
hash 模式就是監聽這一現象
例如

https://example.com/#/home   // hash 值為 #/home

當我們改變網址中 # 後面的值，hash 值也就發生了變化，透過偵測這個變化對照路由表，前端模擬路由就知道應該渲染哪一個元件
而這個跳頁的過程，既不用重新發起請求，也不會刷新頁面

要注意，雖然網址中有 #，但實際上我們發出請求時，永遠只會送出 # 以前的部分

https://example.com/#/home   // https://example.com/
https://example.com/#/user   // https://example.com/

不管我們在哪一頁，# 之後的路徑或片段永遠不會被傳送

另外，雖然改變 hash 值並沒有刷新頁面也沒有發送請求
但 Vue Router 會幫我們增加瀏覽記錄在瀏覽歷史裡
讓我們可以實現上一頁下一頁的操作

History Mode

history 模式則是使用瀏覽器本身 window.history 的功能來實現無刷新的路由切換
和 Hash 模式的差異除了網址中沒有 # 之外
最大的差異就是當我們進行頁面的切換時，我們的 url 也會被改變，我們會真的發出請求

簡單來說，為了避免重刷頁面
hash 模式是我們永遠都在同一個頁面，但我們切換 hash，並監聽 hash 來決定渲染哪一頁
history 模式則是我們真的重新請求一個新頁面，但透過 HTML5 的 History API 來避免頁面刷新

但因為我們真的會把 url 送出去，所以會遇到一些問題

// 假設我們在 home 頁刷新
// hash
https://example.com/#/home   // https://example.com/
https://example.com/#/user   // https://example.com/ 因為 # 以後的內容不會被傳送，我們不管在哪一頁刷新 url 仍是一樣的
// history
https://example.com/home   // https://example.com/home
https://example.com/user   // https://example.com/user 

當我們使用 hash 模式時，不管我們 hash 值是多少，我們始終請求同一頁，因此我們無論在哪一頁進行刷新，都能夠正確的獲取 index.html，然後再跟據 hash 值去決定要渲染哪個元件
但當我們使用 history 模式時，我們在輸入 https://example.com/home 時，實際上期望的是 index.html，並根據路由表中的 home 參數來進行頁面渲染，而非尋找 home.html 檔案
因為 home.html 實際上不存在，如果後端未正確處理，就會導致 404 錯誤