首頁 > web前端 > Vue.js > 主體

vue中history和hash的差別是什麼

WBOY
發布: 2022-03-17 15:48:26
原創
24745 人瀏覽過

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

vue中history和hash的差別是什麼

本文操作環境: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中文網其他相關文章!

相關標籤:
vue
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板