vue-router實現原理

近期面試，遇到關於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的原理