實現原理：vue-router 的原理就是更新視圖而不重新請求頁面
vue-router 可以通過 mode 參數設置為三種模式：hash 模式、history 模式、abstract 模式。
- hash 模式。默認是 hash 模式，基於瀏覽器 history api，使用 window.addEventListener("hashchange", callback, false) 對瀏覽進行監聽。當調用 push 時，把新路由添加到瀏覽器訪問歷史的棧頂。使用 replace 時，把瀏覽器訪問歷史的棧頂路由替換成新路由 hash 的值（等於 url 中 # 及其以后的內容）。瀏覽器是根據 hash 值的變化，將頁面加載到相應的 DOM 位置。錨點變化只是瀏覽器的行為，每次錨點變化后依然會在瀏覽器中留下一條歷史記錄，可以通過瀏覽器的后退按鈕回到上一個位置。
- history 模式。基於瀏覽器 history api，使用 window.onpopstate 對瀏覽器地址進行監聽。對瀏覽器 history api 中的 pushState()、replaceState() 進行封裝，當方法調用，會對瀏覽器的歷史棧進行修改。從而實現 URL 的跳轉而無需加載頁面，但是它的問題在於當刷新頁面的時候會走后端路由，所以需要服務端的輔助來完成，避免 url 無法匹配到資源時能返回頁面。
- abstract 。不涉及和瀏覽器地址的相關記錄。流程跟 hash 模式一樣，通過數組維護模擬瀏覽器的歷史記錄棧 服務端下使用。使用一個不依賴於瀏覽器的瀏覽器歷史虛擬管理后台
總結：
hash 模式和 history 模式都是通過 window.addEventListener() 方法監聽 hashchange 和 popState 進行相應路由的操作。可以通過 back、foward、go 等方法訪問瀏覽器的歷史記錄棧 進行各種跳轉。而 abstract 模式是自己維護一個模擬的瀏覽器歷史記錄棧的數組。
通常情況下，我們會選擇 history 模式，原因就是 hash 模式下 url 帶 # 會顯得不美觀；但實際上，這樣選擇一不小心也會出問題；比如：
當用戶直接在用戶欄輸入地址並帶有參數時：
hash 模式：xxx.com/#/id=5 請求地址為 xxx.com，沒有問題；
history 模式：xxx.com/id=5 請求地址為 xxx.com/id=5，如果后端沒有對應的路由處理，就會返回 404錯誤；
為解決 history 模式的 404 問題，vue-router 提供的方法是：
在服務端增加一個覆蓋所有情況的候選資源：如果 url 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是 app 依賴的頁面。
給個警告，因為這么做以后，你的服務器就不再返回 404 錯誤頁面，因為對於所有路徑都會返回 index.html 文件。為了避免這種情況，你應該在 vue 應用里面覆蓋所有的路由情況，然后再給出一個 404 頁面。或者，如果你使用 node.js 服務器，你可以用 服務端路由匹配到來的 url，並在沒有匹配到路由的時候返回 404，以實現回退。