Vue中hash模式和history模式的區別

vue-router 中hash模式和history模式。

在vue的路由配置中有mode選項，最直觀的區別就是在hash模式下的位址列裡的url夾雜著『#』號，而history模式下沒有。vue預設使用hash。

mode:"hash";

mode:"history";

hash

history

利用了 html5 history inte***ce 中新增的 pushstate() 和 replacestate() 方法。（需要特定瀏覽器支援）

pushstate()方法可以改變url位址且不會傳送請求，replacestate()方法可以讀取歷史記錄棧，還可以對瀏覽器記錄進行修改。

這兩個方法應用於瀏覽器的歷史記錄棧，在當前已有的 back、forward、go 的基礎之上，它們提供了對歷史記錄進行修改的功能。只是當它們執行修改時，雖然改變了當前的 url，但瀏覽器不會立即向後端傳送請求。

因此可以說，hash 模式和 history 模式都屬於瀏覽器自身的特性，vue-router 只是利用了這兩個特性（通過呼叫瀏覽器提供的介面）來實現前端路由。

history模式的問題

通過history api，我們丟掉了醜陋的#，但是它也有個問題：不怕前進，不怕後退，就怕重新整理，f5，（如果後端沒有準備的話）,因為重新整理是實實在在地去請求伺服器的。

在hash模式下，前端路由修改的是#中的資訊，而瀏覽器請求時不會將 # 後面的資料傳送到後台，所以沒有問題。但是在history下，你可以自由的修改path，當重新整理時，如果伺服器中沒有相應的響應或者資源，則會重新整理出來404頁面。