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

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頁面。

原理