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

原理