Vue路由中的hash和history模式的區別及原理

眾所周知、vue-router 具有hash、history兩種路由模式。以Vue3為列

import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
import routes from './routes'

const router = createRouter({
  history: createWebHistory(), // 或者 createWebHashHistory
  routes
})

export default router
 

但是選擇哪種模式比較合適呢，下面我們來探討兩種模式的優點及缺點

hash模式

優點

• 相容性強，相容性達到了IE8
• 除傳送ajax和資源請求外不會發送其他多餘請求
• 改變#後的路徑、不會自動重新整理頁面
• 無需服務端進行配合

缺點

• 訪問路徑上包含#,不美觀
• 對於需要錨點功能的需求會與當前路由機制發生衝突
• 重定向操作時，後段無法獲取url完整路徑。

history模式

優點

• 符合url地址規範, 不需要#, 使用起來比較美觀
• 可以使用history.state獲取完整的路由資訊
• 後端可以獲取到完整的路由資訊

缺點

• 相容性只到IE10
• 改變url路徑後、會重新請求資源。
• 若訪問的路由地址不存在時、會報404,需服務端配合支援重定向返回統一的404頁面。

原理

hash模式靈活運用了html的瞄點功能、改變#後的路徑本質上是更換了當前頁面的瞄點，所以不會重新整理頁面。
history是使用了 H5 提供的pushState() 和 replaceState()，允許開發者直接更改前端路由，即更新瀏覽器 URL 地址而不重新發起請求(將url替換並且不重新整理頁面)。