Vue中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頁面。

如何解決history模式的問題 - nginx配置（未檢驗）

參考位址1：

參考位址2：

方法一：

location /

}

方法二：

vue.js官方教程裡提到的

server

#對應上面的@router，主要原因是路由的路徑資源並不是乙個真實的路徑，所以無法找到具體的檔案

#因此需要rewrite到index.html中，然後交給路由在處理請求資源

location @router

#.......其他部分省略

}

方法三：

location /