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替換並且不刷新頁面)。