vue-router實(shí)現(xiàn)原理

vibiu 發(fā)布于2019-08-23 16:09 / 2852人閱讀

摘要：我們知道是的核心插件，而當(dāng)前項目一般都是單頁面應(yīng)用，也就是說是應(yīng)用在單頁面應(yīng)用中的。原理是傳統(tǒng)的頁面應(yīng)用，是用一些超鏈接來實(shí)現(xiàn)頁面切換和跳轉(zhuǎn)的其實(shí)剛才單頁面應(yīng)用跳轉(zhuǎn)原理即實(shí)現(xiàn)原理實(shí)現(xiàn)原理原理核心就是更新視圖但不重新請求頁面。

近期面試，遇到關(guān)于vue-router實(shí)現(xiàn)原理的問題，在查閱了相關(guān)資料后，根據(jù)自己理解，來記錄下。
我們知道vue-router是vue的核心插件，而當(dāng)前vue項目一般都是單頁面應(yīng)用，也就是說vue-router是應(yīng)用在單頁面應(yīng)用中的。
那么，什么是單頁面應(yīng)用呢？在單頁面應(yīng)用出現(xiàn)之前，多頁面應(yīng)用又是什么樣子呢？

單頁面應(yīng)用與多頁面應(yīng)用 單頁面

即第一次進(jìn)入頁面的時候會請求一個html文件，刷新清除一下。切換到其他組件，此時路徑也相應(yīng)變化，但是并沒有新的html文件請求，頁面內(nèi)容也變化了。

原理是：JS會感知到url的變化，通過這一點(diǎn)，可以用js動態(tài)的將當(dāng)前頁面的內(nèi)容清除掉，然后將下一個頁面的內(nèi)容掛載到當(dāng)前頁面上，這個時候的路由不是后端來做了，而是前端來做，判斷頁面到底是顯示哪個組件，清除不需要的，顯示需要的組件。這種過程就是單頁應(yīng)用，每次跳轉(zhuǎn)的時候不需要再請求html文件了。

多頁面

即每一次頁面跳轉(zhuǎn)的時候，后臺服務(wù)器都會給返回一個新的html文檔，這種類型的網(wǎng)站也就是多頁網(wǎng)站，也叫做多頁應(yīng)用。
原理是：傳統(tǒng)的頁面應(yīng)用，是用一些超鏈接來實(shí)現(xiàn)頁面切換和跳轉(zhuǎn)的

其實(shí)剛才單頁面應(yīng)用跳轉(zhuǎn)原理即 vue-router實(shí)現(xiàn)原理

vue-router實(shí)現(xiàn)原理

原理核心就是更新視圖但不重新請求頁面。

vue-router實(shí)現(xiàn)單頁面路由跳轉(zhuǎn)，提供了三種方式：hash模式、history模式、abstract模式，根據(jù)mode參數(shù)來決定采用哪一種方式。

路由模式

vue-router 提供了三種運(yùn)行模式：
● hash: 使用 URL hash 值來作路由。默認(rèn)模式。
● history: 依賴 HTML5 History API 和服務(wù)器配置。查看 HTML5 History 模式。
● abstract: 支持所有 JavaScript 運(yùn)行環(huán)境，如 Node.js 服務(wù)器端

Hash模式

hash即瀏覽器url中#后面的內(nèi)容，包含#。hash是URL中的錨點(diǎn)，代表的是網(wǎng)頁中的一個位置，單單改變#后的部分，瀏覽器只會加載相應(yīng)位置的內(nèi)容，不會重新加載頁面。
也就是說

即#是用來指導(dǎo)瀏覽器動作的，對服務(wù)器端完全無用，HTTP請求中，不包含#。

每一次改變#后的部分，都會在瀏覽器的訪問歷史中增加一個記錄，使用”后退”按鈕，就可以回到上一個位置。

所以說Hash模式通過錨點(diǎn)值的改變，根據(jù)不同的值，渲染指定DOM位置的不同數(shù)據(jù)。

History模式

HTML5 History API提供了一種功能，能讓開發(fā)人員在不刷新整個頁面的情況下修改站點(diǎn)的URL，就是利用 history.pushState API 來完成 URL 跳轉(zhuǎn)而無須重新加載頁面；

由于hash模式會在url中自帶#，如果不想要很丑的 hash，我們可以用路由的 history 模式，只需要在配置路由規(guī)則時，加入"mode: "history"",這種模式充分利用 history.pushState API 來完成 URL 跳轉(zhuǎn)而無須重新加載頁面。

有時，history模式下也會出問題：
eg:
hash模式下：xxx.com/#/id=5 請求地址為 xxx.com,沒有問題。
history模式下：xxx.com/id=5 請求地址為 xxx.com/id=5，如果后端沒有對應(yīng)的路由處理，就會返回404錯誤；

為了應(yīng)對這種情況，需要后臺配置支持：
在服務(wù)端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。

abstract模式

abstract模式是使用一個不依賴于瀏覽器的瀏覽歷史虛擬管理后端。
根據(jù)平臺差異可以看出，在 Weex 環(huán)境中只支持使用 abstract 模式。不過，vue-router 自身會對環(huán)境做校驗(yàn)，如果發(fā)現(xiàn)沒有瀏覽器的 API，vue-router 會自動強(qiáng)制進(jìn)入 abstract 模式，所以在使用 vue-router 時只要不寫 mode 配置即可，默認(rèn)會在瀏覽器環(huán)境中使用 hash 模式，在移動端原生環(huán)境中使用 abstract 模式。（當(dāng)然，你也可以明確指定在所有情況下都使用 abstract 模式）。

具體更加詳細(xì)的文章，請參考：
Vue番外篇 -- vue-router淺析原理
vue-router的原理