Vue Router 中路由的 history 模式和 hash 模式的区别是什么？

推荐答案

在 Vue Router 中，history 模式和 hash 模式是两种不同的路由模式，它们的主要区别在于 URL 的表现形式和实现方式。

• hash 模式：URL 中会带有 # 符号，例如 http://example.com/#/home。# 后面的内容不会发送到服务器，因此不需要服务器端配置。它通过监听 hashchange 事件来实现路由的切换。

• history 模式：URL 是干净的，没有 # 符号，例如 http://example.com/home。它利用了 HTML5 的 history.pushState API 来实现路由的切换。由于 URL 是真实的路径，因此需要服务器端配置，以避免在刷新页面时返回 404 错误。

本题详细解读

hash 模式

1. URL 表现形式：URL 中带有 # 符号，例如 http://example.com/#/home。
2. 实现原理：通过监听 hashchange 事件来响应 URL 的变化，从而实现路由的切换。
3. 服务器配置：不需要特殊的服务器配置，因为 # 后面的内容不会发送到服务器。
4. 兼容性：兼容性较好，支持所有现代浏览器和旧版浏览器。

history 模式

1. URL 表现形式：URL 是干净的，没有 # 符号，例如 http://example.com/home。
2. 实现原理：利用 HTML5 的 history.pushState 和 history.replaceState API 来操作浏览器的历史记录，从而实现路由的切换。
3. 服务器配置：需要服务器端配置，以确保在刷新页面或直接访问某个路径时，服务器能够正确返回应用的入口文件（通常是 index.html），否则会返回 404 错误。
4. 兼容性：兼容性稍差，不支持 IE9 及以下版本的浏览器。

选择建议

• 如果你的应用不需要支持旧版浏览器，并且希望 URL 更加美观，推荐使用 history 模式。
• 如果你的应用需要支持旧版浏览器，或者你不想配置服务器端，可以选择 hash 模式。