Vue 是一款流行的前端框架，它提供了强大的路由功能，用于构建单页应用程序（SPA）。Vue 路由有两种模式：Hash 模式和 History 模式。本文将详细介绍这两种模式的原理、特点和使用场景，帮助你在 Vue 项目中选择适合的路由模式。

一、Hash 模式

        Hash 模式是 Vue 路由的默认模式。在 Hash 模式下，URL 中的路径会以 # 符号作为分隔符，后面跟随一个不会提交到服务器的片段标识符（hash）。例如，http://example.com/#/home。

        Hash 模式的原理是监听浏览器的 hashchange 事件，当 URL 的 hash 发生变化时，Vue 路由会根据相应的配置加载对应的组件。

Hash 模式的特点：

1. 兼容性好：Hash 模式支持所有现代浏览器，并且在不支持 HTML5 History API 的旧版浏览器上也能正常工作。
2. 简单配置：在 Vue 路由中，默认使用 Hash 模式，不需要额外的配置。
3. 易于部署：由于使用了 hash，URL 发生变化时不会触发页面刷新，因此部署时只需将静态文件部署到服务器即可。

二、History 模式

        History 模式是 Vue 路由的另一种模式。在 History 模式下，URL 中的路径不再使用 # 符号，而是直接使用正常的路径形式。例如，http://example.com/home。

        History 模式的原理是使用 HTML5 History API 中的 pushState 和 replaceState 方法，它们可以在不刷新页面的情况下修改浏览器的历史记录和 URL。

History 模式的特点：

1. 真实 URL：History 模式使用正常的路径形式，更符合用户的直观感受，URL 更加美观。
2. 无需 hash：相对于 Hash 模式，History 模式的 URL 中不包含 # 符号，更加简洁。
3. 需要服务器配置：使用 History 模式需要服务器进行相应的配置，以确保在直接访问 URL 时返回正确的页面。

三、如何选择合适的路由模式

        在选择路由模式时，可以根据实际需求和项目要求进行考虑。

使用 Hash 模式：

• 如果你的项目不需要考虑兼容性问题，或者需要在旧版浏览器中支持路由功能。
• 如果你希望简化部署过程，只需将静态文件部署到服务器即可。

使用 History 模式：

• 如果你希望 URL 更加美观、简洁，不希望在 URL 中出现 # 符号。
• 如果你可以进行服务器配置，确保在直接访问 URL 时返回正确的页面。
• 如果你的项目不需要考虑旧版浏览器的兼容性问题。

在 Vue 项目中，可以通过在路由配置中设置 mode 属性来切换路由模式：

const router = new VueRouter({
  mode: 'history', // 或者 'hash'
  routes: [...]
});

喜欢的话麻烦点个赞吧，如果觉得写得不错欢迎赞赏哦！