近期面試，遇到關於vue-router實現原理的問題，在查閱了相關資料后，根據自己理解，來記錄下。
我們知道vue-router是vue的核心插件，而當前vue項目一般都是單頁面應用，也就是說vue-router是應用在單頁面應用中的。
那么，什么是單頁面應用呢？在單頁面應用出現之前，多頁面應用又是什么樣子呢？
單頁面應用與多頁面應用
單頁面
即 第一次進入頁面的時候會請求一個html文件，刷新清除一下。切換到其他組件，此時路徑也相應變化，但是並沒有新的html文件請求，頁面內容也變化了。
原理是：JS會感知到url的變化，通過這一點，可以用js動態的將當前頁面的內容清除掉，然后將下一個頁面的內容掛載到當前頁面上，這個時候的路由不是后端來做了，而是前端來做，判斷頁面到底是顯示哪個組件，清除不需要的，顯示需要的組件。這種過程就是單頁應用，每次跳轉的時候不需要再請求html文件了。
多頁面
即 每一次頁面跳轉的時候，后台服務器都會給返回一個新的html文檔，這種類型的網站也就是多頁網站，也叫做多頁應用。
原理是：傳統的頁面應用，是用一些超鏈接來實現頁面切換和跳轉的
其實剛才單頁面應用跳轉原理即 vue-router實現原理
vue-router實現原理
原理核心就是 更新視圖但不重新請求頁面。
vue-router實現單頁面路由跳轉，提供了三種方式：hash模式、history模式、abstract模式，根據mode參數來決定采用哪一種方式。
路由模式
vue-router 提供了三種運行模式：
● hash: 使用 URL hash 值來作路由。默認模式。
● history: 依賴 HTML5 History API 和服務器配置。查看 HTML5 History 模式。
● abstract: 支持所有 JavaScript 運行環境，如 Node.js 服務器端
Hash模式
hash即瀏覽器url中#后面的內容，包含#。hash是URL中的錨點，代表的是網頁中的一個位置，單單改變#后的部分，瀏覽器只會加載相應位置的內容，不會重新加載頁面。
也就是說
- 即#是用來指導瀏覽器動作的，對服務器端完全無用，HTTP請求中，不包含#。
- 每一次改變#后的部分，都會在瀏覽器的訪問歷史中增加一個記錄，使用”后退”按鈕，就可以回到上一個位置。
所以說Hash模式通過錨點值的改變，根據不同的值，渲染指定DOM位置的不同數據。
History模式
HTML5 History API提供了一種功能，能讓開發人員在不刷新整個頁面的情況下修改站點的URL，就是利用 history.pushState API 來完成 URL 跳轉而無須重新加載頁面；
由於hash模式會在url中自帶#，如果不想要很丑的 hash，我們可以用路由的 history 模式，只需要在配置路由規則時，加入"mode: 'history'",這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須重新加載頁面。
有時，history模式下也會出問題：
eg:
hash模式下：xxx.com/#/id=5 請求地址為 xxx.com,沒有問題。
history模式下：xxx.com/id=5 請求地址為 xxx.com/id=5，如果后端沒有對應的路由處理，就會返回404錯誤；
為了應對這種情況，需要后台配置支持：
在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。
abstract模式
abstract模式是使用一個不依賴於瀏覽器的瀏覽歷史虛擬管理后端。
根據平台差異可以看出，在 Weex 環境中只支持使用 abstract 模式。 不過，vue-router 自身會對環境做校驗，如果發現沒有瀏覽器的 API，vue-router 會自動強制進入 abstract 模式，所以 在使用 vue-router 時只要不寫 mode 配置即可，默認會在瀏覽器環境中使用 hash 模式，在移動端原生環境中使用 abstract 模式。 （當然，你也可以明確指定在所有情況下都使用 abstract 模式）。
具體更加詳細的文章，請參考：
Vue番外篇 -- vue-router淺析原理
vue-router的原理