Vue-router 中hash模式和history模式的關(guān)系

在vue的路由配置中有mode選項(xiàng) 最直觀的區(qū)別就是在url中 hash 帶了一個(gè)很丑的 # 而history是沒有#的

mode:"hash";  
mode:"history"; 

hash模式和history模式的不同

對(duì)于vue這類漸進(jìn)式前端開發(fā)框架，為了構(gòu)建 SPA（單頁(yè)面應(yīng)用），需要引入前端路由系統(tǒng)，這也就是 Vue-Router 存在的意義。前端路由的核心，就在于 —— 改變視圖的同時(shí)不會(huì)向后端發(fā)出請(qǐng)求。

為了達(dá)到這一目的，瀏覽器當(dāng)前提供了以下兩種支持：

• hash —— 即地址欄 URL 中的 # 符號(hào)（此 hash 不是密碼學(xué)里的散列運(yùn)算）。比如這個(gè) URL：http://www.abc.com/#/hello，hash 的值為 #/hello。它的特點(diǎn)在于：hash 雖然出現(xiàn)在 URL 中，但不會(huì)被包括在 HTTP 請(qǐng)求中，對(duì)后端完全沒有影響，因此改變 hash 不會(huì)重新加載頁(yè)面。
• history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定瀏覽器支持）這兩個(gè)方法應(yīng)用于瀏覽器的歷史記錄棧，在當(dāng)前已有的 back、forward、go 的基礎(chǔ)之上，它們提供了對(duì)歷史記錄進(jìn)行修改的功能。只是當(dāng)它們執(zhí)行修改時(shí)，雖然改變了當(dāng)前的 URL，但瀏覽器不會(huì)立即向后端發(fā)送請(qǐng)求。
• 因此可以說，hash 模式和 history 模式都屬于瀏覽器自身的特性，Vue-Router 只是利用了這兩個(gè)特性（通過調(diào)用瀏覽器提供的接口）來(lái)實(shí)現(xiàn)前端路由.

使用場(chǎng)景

一般場(chǎng)景下，hash 和 history 都可以，除非你更在意顏值，# 符號(hào)夾雜在 URL 里看起來(lái)確實(shí)有些不太美麗。

如果不想要很丑的 hash，我們可以用路由的 history 模式，這種模式充分利用 history.pushState API 來(lái)完成URL 跳轉(zhuǎn)而無(wú)須重新加載頁(yè)面。

另外，根據(jù) Mozilla Develop Network 的介紹，調(diào)用 history.pushState() 相比于直接修改 hash，存在以下優(yōu)勢(shì):

• pushState() 設(shè)置的新 URL 可以是與當(dāng)前 URL 同源的任意 URL；而 hash 只可修改 # 后面的部分，因此只能設(shè)置與當(dāng)前 URL 同文檔的 URL；
• pushState() 設(shè)置的新 URL 可以與當(dāng)前 URL 一模一樣，這樣也會(huì)把記錄添加到棧中；而 hash 設(shè)置的新值必須與原來(lái)不一樣才會(huì)觸發(fā)動(dòng)作將記錄添加到棧中；
• pushState() 通過 stateObject 參數(shù)可以添加任意類型的數(shù)據(jù)到記錄中；而 hash 只可添加短字符串；
• pushState() 可額外設(shè)置 title 屬性供后續(xù)使用。

當(dāng)然啦，history 也不是樣樣都好。SPA 雖然在瀏覽器里游刃有余，但真要通過 URL 向后端發(fā)起 HTTP 請(qǐng)求時(shí)，兩者的差異就來(lái)了。尤其在用戶手動(dòng)輸入 URL 后回車，或者刷新（重啟）瀏覽器的時(shí)候。

個(gè)人在接入微信的一個(gè)活動(dòng)開發(fā)過程中 開始使用的hash模式，但是后面后端無(wú)法獲取到我#后面的url參數(shù)，于是就把參數(shù)寫在#前面，但是討論后還是決定去掉這個(gè)巨丑的#

于是乎改用history模式，但是開始跑流程的時(shí)候是沒問題，但是后來(lái)發(fā)現(xiàn)跳轉(zhuǎn)后刷新或者回跳，會(huì)報(bào)一個(gè)404的錯(cuò)誤，找不到指定的路由,最后后端去指向正確的路由 加了/hd/xxx 去匹配是否有這個(gè)/hd/{:path} 才得以解決

總結(jié)

1 hash 模式下，僅 hash 符號(hào)之前的內(nèi)容會(huì)被包含在請(qǐng)求中，如 http://www.abc.com，因此對(duì)于后端來(lái)說，即使沒有做到對(duì)路由的全覆蓋，也不會(huì)返回 404 錯(cuò)誤。

2 history 模式下，前端的 URL 必須和實(shí)際向后端發(fā)起請(qǐng)求的 URL 一致，如 http://www.abc.com/book/id。如果后端缺少對(duì) /book/id 的路由處理，將返回 404 錯(cuò)誤。Vue-Router 官網(wǎng)里如此描述：“不過這種模式要玩好，還需要后臺(tái)配置支持……所以呢，你要在服務(wù)端增加一個(gè)覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個(gè) index.html 頁(yè)面，這個(gè)頁(yè)面就是你 app 依賴的頁(yè)面?！?br />

3 結(jié)合自身例子，對(duì)于一般的 Vue + Vue-Router + Webpack + XXX 形式的 Web 開發(fā)場(chǎng)景，用 history 模式即可，只需在后端（Apache 或 Nginx）進(jìn)行簡(jiǎn)單的路由配置，同時(shí)搭配前端路由的 404 頁(yè)面支持。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。