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 错误。
相关推荐
袁煦丞6 分钟前
家用NAS+云盘自由NanoPi R4S+iStoreOS:cpolar内网穿透实验室第460个成功挑战
前端·程序员·远程工作
浏览器API调用工程师_Taylor26 分钟前
日报自动化实战:告别手动复制粘贴
前端·javascript·node.js
晴殇i31 分钟前
JavaScript还能这样写?!ES2025新语法让代码优雅到极致
前端·javascript·程序员
浏览器API调用工程师_Taylor41 分钟前
我是如何将手动的日报自动化的☺️☺️☺️
前端·javascript·爬虫
前端Hardy1 小时前
HTML&CSS&JS:抖音爆火的满屏“关心弹幕”酷炫卡片,已经帮你打包好了,快来体验吧!
前端·javascript·css
江城开朗的豌豆1 小时前
我的Vue项目胖成球了!用Webpack给它狠狠瘦个身
前端·javascript
WebInfra1 小时前
Rspack 1.6 发布:让打包产物更小、更纯净
前端·javascript·前端框架
Mintopia1 小时前
⚙️ Next.js 接口限流与审计全攻略 —— 用 @upstash/ratelimit 打造优雅“闸门”
前端·javascript·全栈
Mintopia2 小时前
🌐 实时翻译 + AIGC:Web跨语言内容生成的技术闭环
前端·javascript·aigc
Cache技术分享2 小时前
225. Java 集合 - List接口 —— 记住顺序的集合
前端·后端