脚本宝典收集整理的这篇文章主要介绍了Vue路由中的hash和history模式的区别及原理，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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替换并且不刷新页面)。

脚本宝典总结

以上是脚本宝典为你收集整理的Vue路由中的hash和history模式的区别及原理全部内容，希望文章能够帮你解决Vue路由中的hash和history模式的区别及原理所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。