Vue3 中 createWebHistory 和 createWebHashHistory 的區別

在 Vue 3 中,`createWebHistory` 和 `createWebHashHistory` 是用於創建路由 history 的兩個不同函數,它們分別屬於 `router-core` 和 `router-dom` 模塊。這兩個函數的主要區別在於如何處理 URL 的歷史記錄和管理瀏覽器的導航行爲。

createWebHistory

`createWebHistory` 方法主要用於創建一個基於 HTML5 History API 的路由 history。使用這個方法時,URL 將不會包含 hash(即 “#”)符號,而是採用標準的路徑形式。這意味着當用戶刷新頁面或者直接在瀏覽器中輸入網址訪問某個頁面時,將按照正常的 HTTP 請求流程來處理。

這種方法通常需要服務端的支持,因爲當客戶端和服務端的路由配置不匹配時,可能會導致 404 錯誤或者其他問題。因此,在使用 `createWebHistory` 時,確保服務端已經正確地設置了重定向或渲染相應的靜態文件是非常重要的。

createWebHashHistory

相比之下,`createWebHashHistory` 則依賴於 URL 的哈希部分(即 “#” 後面的內容)來實現路由功能。即使沒有服務端的特殊支持,這種方法也能正常工作。這是因爲無論是否有服務端參與,瀏覽器都會解析哈希值的變化,而無需與遠程服務器通信。

這種方法的優點是可以在任何環境下運行,包括單頁應用 (SPA) 在內的離線場景。但是,由於使用了哈希符號,這種方式會改變 URL 的顯示方式,可能不符合一些用戶的習慣或者某些 SEO 標準的要求。此外,使用哈希路由時,後退按鈕的行爲也可能不如預期的那樣直觀。

如果你有一個 SPA 並且可以控制服務端設置,那麼 `createWebHistory` 是更好的選擇;否則,你可以考慮使用 `createWebHashHistory` 作爲備選方案。在實際開發過程中,應該根據自己的需求和項目的實際情況來決定使用哪一種路由策略。

为您推荐