两者的主要区别并不是在 是否需要后端支持 或 是否可以控制请求 ,而是在 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
错误。