本文參考總結於：
1、vue-router原理分析 - https://www.cnblogs.com/yanze/p/7644631.html
2、location.hash詳解 - http://blog.csdn.net/baidu_31333625/article/details/54288223
3、使用HTML5的History API - https://www.cnblogs.com/chaoyuehedy/p/5758143.html
4、HTML5 History 模式 - https://router.vuejs.org/zh-cn/essentials/history-mode.html
我們都知道，單頁面應用(SPA)的核心之一是: 更新視圖而不重新請求頁面;vue-rouetr在實現單頁面前端路由時，提供了兩種方式：Hash模式和History模式；根據mode參數來決定採用哪一種方式。
那爲什麼這兩種方式能夠實現試圖更新不跳轉，其原因在於：
1、Hash模式：
hash（#）是URL 的錨點，代表的是網頁中的一個位置，單單改變#後的部分，瀏覽器只會滾動到相應位置，不會重新加載網頁，也就是說 #是用來指導瀏覽器動作的，對服務器端完全無用，HTTP請求中也不會不包括#；同時每一次改變#後的部分，都會在瀏覽器的訪問歷史中增加一個記錄，使用”後退”按鈕，就可以回到上一個位置；
2、History模式：
HTML5 History API提供了一種功能，能讓開發人員在不刷新整個頁面的情況下修改站點的URL，就是利用 history.pushState API 來完成 URL 跳轉而無須重新加載頁面；
通常情況下，我們會選擇使用History模式，原因就是Hash模式下URL帶着‘#’會顯得不美觀；但實際上，這樣選擇一不小心也會出問題；比如：
但當用戶直接在用戶欄輸入地址並帶有參數時：
Hash模式：xxx.com/#/id=5 請求地址爲 xxx.com,沒有問題;
History模式: xxx.com/id=5 請求地址爲 xxx.com/id=5，如果後端沒有對應的路由處理，就會返回404錯誤；
爲解決這一問題，vue-router提供的方法是：
在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。
給個警告，因爲這麼做以後，你的服務器就不再返回 404 錯誤頁面，因爲對於所有路徑都會返回 index.html 文件。爲了避免這種情況，你應該在 Vue 應用裏面覆蓋所有的路由情況，然後在給出一個 404 頁面。或者，如果你使用 Node.js 服務器，你可以用服務端路由匹配到來的 URL，並在沒有匹配到路由的時候返回 404，以實現回退。