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

2024-05-06 15:32:33

字體：大中小

來源：轉載

供稿：網友

Vue-router 中hash模式和history模式的關系

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

mode:"hash";
mode:"history";

hash模式和history模式的不同

對于vue這類漸進式前端開發框架，為了構建 SPA（單頁面應用），需要引入前端路由系統，這也就是 Vue-Router 存在的意義。前端路由的核心，就在于 —— 改變視圖的同時不會向后端發出請求。

為了達到這一目的，瀏覽器當前提供了以下兩種支持：

hash —— 即地址欄 URL 中的 # 符號（此 hash 不是密碼學里的散列運算）。比如這個 URL：http://www.abc.com/#/hello，hash 的值為 #/hello。它的特點在于：hash 雖然出現在 URL 中，但不會被包括在 HTTP 請求中，對后端完全沒有影響，因此改變 hash 不會重新加載頁面。 history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定瀏覽器支持）這兩個方法應用于瀏覽器的歷史記錄棧，在當前已有的 back、forward、go 的基礎之上，它們提供了對歷史記錄進行修改的功能。只是當它們執行修改時，雖然改變了當前的 URL，但瀏覽器不會立即向后端發送請求。因此可以說，hash 模式和 history 模式都屬于瀏覽器自身的特性，Vue-Router 只是利用了這兩個特性（通過調用瀏覽器提供的接口）來實現前端路由.

使用場景

一般場景下，hash 和 history 都可以，除非你更在意顏值，# 符號夾雜在 URL 里看起來確實有些不太美麗。

如果不想要很丑的 hash，我們可以用路由的 history 模式，這種模式充分利用 history.pushState API 來完成URL 跳轉而無須重新加載頁面。

另外，根據 Mozilla Develop Network 的介紹，調用 history.pushState() 相比于直接修改 hash，存在以下優勢:

pushState() 設置的新 URL 可以是與當前 URL 同源的任意 URL；而 hash 只可修改 # 后面的部分，因此只能設置與當前 URL 同文檔的 URL； pushState() 設置的新 URL 可以與當前 URL 一模一樣，這樣也會把記錄添加到棧中；而 hash 設置的新值必須與原來不一樣才會觸發動作將記錄添加到棧中； pushState() 通過 stateObject 參數可以添加任意類型的數據到記錄中；而 hash 只可添加短字符串； pushState() 可額外設置 title 屬性供后續使用。

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

個人在接入微信的一個活動開發過程中開始使用的hash模式，但是后面后端無法獲取到我#后面的url參數，于是就把參數寫在#前面，但是討論后還是決定去掉這個巨丑的#

上一篇：jQuery實現的監聽導航滾動置頂狀態功能示例

下一篇：JS實現面向對象繼承的5種方式分析