Vue中的hash模式和history模式

两者的主要区别并不是在 是否需要后端支持是否可以控制请求 ,而是在 URL 结构、路由变化的实现方式浏览器行为 上有显著差异。

1. hash 模式 vs history 模式的区别

URL 结构
  • hash 模式

    • URLhttps://example.com/#/home
    • # 后的部分 :URL 中 # 后的部分称为 hash ,它是前端用来记录路由状态的一部分。浏览器会根据 # 后的路径切换组件,但不会向服务器发送请求。
    • 影响范围 :当 URL 改变时,只有前端会响应,服务器对 URL 后的 # 后的路径部分 不关心
  • history 模式

    • URLhttps://example.com/home
    • 没有 #history 模式下的 URL 看起来像传统的路径,完全符合现代网页的 URL 格式。
    • 影响范围 :浏览器的地址栏直接显示的是完整路径(如 /home)。当路径发生变化时,浏览器会向服务器请求新的资源。
浏览器行为
  • hash 模式

    • 不请求后端 :浏览器只会更新地址栏中的 # 部分,路径的变化 不会导致页面刷新,也不会向服务器发起请求。
    • 页面切换 :前端完全控制路由,用户切换页面时,浏览器 不会重新加载页面,只是通过 JavaScript 动态修改视图。
  • history 模式

    • 请求后端:当用户刷新页面或直接访问某个 URL 时,浏览器会向服务器发起请求,获取相应的页面或资源。
    • 路径与后端一致 :由于路径看起来像传统路径,用户直接输入路径时(如 /home/about),浏览器会向后端发送请求。如果后端没有处理这个路径,就会返回 404 错误。
实现方式
  • hash 模式

    • 利用浏览器的 onhashchange 事件监听 URL 中 # 后部分的变化,Vue Router 通过监听这个变化来切换组件,而不会向服务器发起请求。
  • history 模式

    • 利用 HTML5 提供的 History APIpushStatereplaceState)来改变浏览器地址栏中的路径,同时不重新加载页面。虽然浏览器地址栏的 URL 会改变,但前端路由的管理仍由 JavaScript 完成。
    • 后端支持 :当 URL 路径改变时,浏览器 向服务器发起请求,如果用户刷新或直接访问某个 URL,后端需要返回正确的资源。

2. 需要后端支持

  • hash 模式

    • 由于 # 后的部分不会发送到服务器,前端完全负责路由管理,不需要后端支持
    • 当用户刷新页面时,前端的 Vue 应用依然能够接管页面的渲染,# 后的路径不会影响后端。
  • history 模式

    • 需要后端支持:当用户刷新页面或直接访问某个 URL 时,浏览器会向服务器请求这个路径(如 /home/about)。如果服务器没有处理这些路径,会返回 404 错误。
    • 后端需要配置 所有路径 指向前端应用的入口文件(如 index.html),然后由前端的 Vue Router 处理实际的路由匹配。

3. SEO 和用户体验

  • hash 模式

    • 不太友好 :由于 URL 中包含 #,这不符合传统的 URL 规范,且搜索引擎通常不会索引 # 后的内容,因此在 SEO(搜索引擎优化) 上不太友好。
    • 用户体验 :虽然 hash 模式不需要后端支持,但用户看到的 URL 会包含 #,可能影响美观和可读性。
  • history 模式

    • SEO 更友好 :没有 #,URL 看起来更加干净、直观,符合传统的 URL 规范,更适合 SEO。搜索引擎更容易索引这类 URL。
    • 用户体验 :URL 更符合用户的直觉,且用户在地址栏看到的路径是 标准的 URL 路径,更易于分享和理解。

4. 总结:两者的主要区别

特性 hash 模式 history 模式
URL 结构 https://example.com/#/home https://example.com/home
是否请求后端 不会向服务器发起请求(只会更新浏览器地址栏) 会向服务器发起请求,尤其是刷新页面或直接访问时
后端支持 不需要,前端完全控制路由 需要后端支持,后端要返回 index.html 作为入口
用户体验 URL 包含 #,不符合传统 URL 规范,SEO 不友好 URL 看起来更干净,符合传统的 URL 格式,SEO 更友好
页面刷新行为 刷新页面时只会加载前端应用 刷新页面时会请求后端资源,若未配置正确会返回 404

总结

  • hash 模式:适用于不需要后端配合的简单应用,用户体验和 SEO 较差,但实现简单,且不需要后端支持。
  • history 模式 :适用于需要漂亮、符合标准的 URL 且能支持 SEO 的应用,但需要后端支持来处理路径请求,避免 404 错误。
相关推荐
进阶的鱼2 小时前
React+ts+vite脚手架搭建(三)【状态管理篇】
前端·javascript·react.js
By北阳2 小时前
Less resolver error:‘~antd/es/style/themes/index.less‘ wasn‘t found.
前端·elasticsearch·less
西洼工作室2 小时前
SSE与轮询技术实时对比演示
前端·javascript·css
华仔啊3 小时前
加班到凌晨,我用 Vue3 + ElementUI 写了个可编辑的表格组件
vue.js·element
IT_陈寒4 小时前
Vite 5.0 性能优化实战:3 个关键配置让你的构建速度提升50%
前端·人工智能·后端
小咕聊编程4 小时前
【含文档+PPT+源码】基于SpringBoot+Vue的停车场管理系统
vue.js·spring boot·后端·毕业设计·停车场
excel4 小时前
Vue2 动态添加属性导致页面不更新的原因与解决方案
前端
GISer_Jing7 小时前
明天好好总结汇总分析博客
前端·javascript·面试
做运维的阿瑞9 小时前
Windows 环境下安装 Node.js 和 Vue.js 框架完全指南
前端·javascript·vue.js·windows·node.js