vue中history和hash的差別是什麼

區別：1、hash路由再網址列URL上有“#”，而history路由沒有；2、進行回車刷新操作時，hash路由會載入到網址列對應的頁面，而history路由一般會出現404錯誤；3、hash支援一些低版的瀏覽器，而history不支援。

本文操作環境：windows10系統、Vue2.9.6版，DELL G3電腦。

vue中history和hash的差別是什麼

• 1.hash路由在網址列URL上有#，用 window.location.hash 讀取。而history路由沒有會好看一點

• 2.我們進行回車刷新操作，hash路由會載入到網址列對應的頁面，而history路由一般就404報錯了（刷新是網路請求，沒有後端準備時會報錯）。

• 3.hash路由支援低版的瀏覽器，而history路由則是HTML5新增的API。

• 4.hash的特點在於它雖然出現在了URL中，但是不包括在http請求中，所以對於後端是沒有一點影響的，所以改變hash不會重新載入頁面，所以這也是單頁面應用程式的必備。

• 5.history運用了瀏覽器的歷史記錄棧，之前有back,forward,go方法，之後在HTML5中新增了pushState（）和replaceState（）方法，它們提供了對歷史記錄進行修改的功能，不過在進行修改時，雖然改變了目前的URL，但是瀏覽器不會馬上向後端發送請求。

• 6.history的這種模式需要後台設定支援。例如：當我們進行專案的主頁的時候，一切正常，可以訪問，但是當我們刷新頁面或者直接訪問路徑的時候就會返回404，那是因為在history模式下，只是動態的通過js操作window.history來改變瀏覽器網址列裡的路徑，並沒有發起http請求，但是當我直接在瀏覽器裡輸入這個地址的時候，就一定要對伺服器發起http請求，但是這個目標在伺服器上又不存在，所以會回傳404

總結

當然history也不是樣樣都好。 SPA雖然在瀏覽器裡游刃有餘，單真要透過URL向後端發起HTTP請求時，兩者的差異就來了。尤其在用戶手動輸入URL後回車，或是刷新（重啟）瀏覽器的時候。

1：hash 模式下，僅hash符號之前的內容會被包含在請求中，如http://www.abc.com,因此對於後端來說，即使沒有做到對路由的全覆蓋，也不會回傳404錯誤。

2：history模式下，前端的URL必須和實際向後端發起請求的URL一致。如htttp://www.abc.com/book/id。如果後端缺少對/book/id 的路由處理，將會回傳404錯誤

問題解決：

出現404錯誤的解決方法：網路上介紹的很多方法都不行。安裝URL重寫模組，設定重寫規則，統一指向index.html.或直接把url重寫產生的web.config檔直接放置到網站根目錄下即可。

【相關推薦：《vue.js教學》】

#

以上是vue中history和hash的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！