hash和history的區別


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

在vue的路由配置中有mode選項,最直觀的區別就是在url中hash 帶了一個很丑的 # ,而history是沒有#的。vue默認使用hash。

mode:"hash";
mode:"history";
hash
—— 即地址欄 URL 中的 # 符號(此 hash 不是密碼學里的散列運算)。
比如這個 URL:http://www.aaa.com/#/hello,hash 的值為 #/hello。它的特點在於:hash 雖然出現在 URL 中,但不會被包括在 HTTP 請求中,對后端完全沒有影響,因此改變 hash 不會重新加載頁面。


history
—— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。(需要特定瀏覽器支持)
這兩個方法應用於瀏覽器的歷史記錄棧,在當前已有的 back、forward、go 的基礎之上,它們提供了對歷史記錄進行修改的功能。只是當它們執行修改時,雖然改變了當前的 URL,但瀏覽器不會立即向后端發送請求。

因此可以說,hash 模式和 history 模式都屬於瀏覽器自身的特性,Vue-Router 只是利用了這兩個特性(通過調用瀏覽器提供的接口)來實現前端路由。

history模式的問題
       通過history api,我們丟掉了丑陋的#,但是它也有個問題:不怕前進,不怕后退,就怕刷新,f5,(如果后端沒有准備的話),因為刷新是實實在在地去請求服務器的。
       在hash模式下,前端路由修改的是#中的信息,而瀏覽器請求時不會將 # 后面的數據發送到后台,所以沒有問題。但是在history下,你可以自由的修改path,當刷新時,如果服務器中沒有相應的響應或者資源,則會刷新出來404頁面。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM