两者的主要区别并不是在 是否需要后端支持 或 是否可以控制请求 ,而是在 URL 结构、路由变化的实现方式 和 浏览器行为 上有显著差异。
1. hash 模式 vs history 模式的区别
URL 结构
- 
hash模式:- URL :https://example.com/#/home
- #后的部分 :URL 中- #后的部分称为 hash ,它是前端用来记录路由状态的一部分。浏览器会根据- #后的路径切换组件,但不会向服务器发送请求。
- 影响范围 :当 URL 改变时,只有前端会响应,服务器对 URL 后的 #后的路径部分 不关心。
 
- URL :
- 
history模式:- URL :https://example.com/home
- 没有 #:history模式下的 URL 看起来像传统的路径,完全符合现代网页的 URL 格式。
- 影响范围 :浏览器的地址栏直接显示的是完整路径(如 /home)。当路径发生变化时,浏览器会向服务器请求新的资源。
 
- URL :
浏览器行为
- 
hash模式:- 不请求后端 :浏览器只会更新地址栏中的 #部分,路径的变化 不会导致页面刷新,也不会向服务器发起请求。
- 页面切换 :前端完全控制路由,用户切换页面时,浏览器 不会重新加载页面,只是通过 JavaScript 动态修改视图。
 
- 不请求后端 :浏览器只会更新地址栏中的 
- 
history模式:- 请求后端:当用户刷新页面或直接访问某个 URL 时,浏览器会向服务器发起请求,获取相应的页面或资源。
- 路径与后端一致 :由于路径看起来像传统路径,用户直接输入路径时(如 /home或/about),浏览器会向后端发送请求。如果后端没有处理这个路径,就会返回404错误。
 
实现方式
- 
hash模式:- 利用浏览器的 onhashchange事件监听 URL 中#后部分的变化,Vue Router 通过监听这个变化来切换组件,而不会向服务器发起请求。
 
- 利用浏览器的 
- 
history模式:- 利用 HTML5 提供的 History API (pushState和replaceState)来改变浏览器地址栏中的路径,同时不重新加载页面。虽然浏览器地址栏的 URL 会改变,但前端路由的管理仍由 JavaScript 完成。
- 后端支持 :当 URL 路径改变时,浏览器 向服务器发起请求,如果用户刷新或直接访问某个 URL,后端需要返回正确的资源。
 
- 利用 HTML5 提供的 History API (
2. 需要后端支持
- 
hash模式:- 由于 #后的部分不会发送到服务器,前端完全负责路由管理,不需要后端支持。
- 当用户刷新页面时,前端的 Vue 应用依然能够接管页面的渲染,#后的路径不会影响后端。
 
- 由于 
- 
history模式:- 需要后端支持:当用户刷新页面或直接访问某个 URL 时,浏览器会向服务器请求这个路径(如 /home、/about)。如果服务器没有处理这些路径,会返回404错误。
- 后端需要配置 所有路径 指向前端应用的入口文件(如 index.html),然后由前端的 Vue Router 处理实际的路由匹配。
 
- 需要后端支持:当用户刷新页面或直接访问某个 URL 时,浏览器会向服务器请求这个路径(如 
3. SEO 和用户体验
- 
hash模式:- 不太友好 :由于 URL 中包含 #,这不符合传统的 URL 规范,且搜索引擎通常不会索引#后的内容,因此在 SEO(搜索引擎优化) 上不太友好。
- 用户体验 :虽然 hash模式不需要后端支持,但用户看到的 URL 会包含#,可能影响美观和可读性。
 
- 不太友好 :由于 URL 中包含 
- 
history模式:- SEO 更友好 :没有 #,URL 看起来更加干净、直观,符合传统的 URL 规范,更适合 SEO。搜索引擎更容易索引这类 URL。
- 用户体验 :URL 更符合用户的直觉,且用户在地址栏看到的路径是 标准的 URL 路径,更易于分享和理解。
 
- SEO 更友好 :没有 
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错误。