vue 两种路由模式

Vue 中的路由有两种主要的模式，它们用于控制路由的 URL 显示方式和路径解析方式。这两种模式分别是 哈希模式（Hash Mode）和 历史模式（History Mode）。这两种模式是由 vue-router 库提供的路由模式选择，可以在 Vue 应用中设置。

1. 哈希模式 (Hash Mode)

在哈希模式下，路由路径通过 URL 中的 # 字符来定义。它不会触发页面重新加载，而是通过改变 # 后面的部分来改变应用的状态。哈希模式不需要服务器进行配置，因为 URL 中的 # 后面的部分不会被发送到服务器。

特点：

• URL 中包含 # 符号（如：http://example.com/#/home）。
• 浏览器不会向服务器发送 # 后的部分，因此不会触发页面刷新。
• 支持不需要服务器配置，适合单页应用。
• 对于某些 SEO 需求较少的场景很合适。

示例 URL：
http://example.com/#/home

如何启用哈希模式： 在创建 Vue Router 实例时，通过 createRouter 配置 history 为 createWebHashHistory()：

2. 历史模式 (History Mode)

历史模式通过 HTML5 History API 实现，它不再使用 # 符号，而是直接修改浏览器的 URL，以呈现更为干净的路径。历史模式的路由 URL 看起来像传统的网页 URL（如：http://example.com/home）。然而，使用历史模式时，服务器必须正确配置，否则刷新页面时会出现 404 错误。

特点：

• URL 不包含 #，呈现传统的路径结构。
• 需要服务器支持 URL 重定向，否则刷新页面时会出错。
• 对 SEO 更友好，因为 URL 是标准的路径格式。
• 浏览器的前进和后退按钮可以正常工作。

示例 URL：
http://example.com/home

如何启用历史模式： 在创建 Vue Router 实例时，通过 createRouter 配置 history 为 createWebHistory()：

选择哪种模式？

1. 哈希模式：

   • 适合没有服务器配置的环境。
   • URL 中的 # 可能不太适合需要干净 URL 的应用。
   • 不支持一些浏览器的历史管理功能。

2. 历史模式：

   • URL 更友好，适合 SEO 和干净的 URL。
   • 需要服务器支持 URL 重写，避免刷新时出现 404 错误。

总结

• 哈希模式：URL 中有 #，无需服务器配置，适合简单的单页应用。
• 历史模式：没有 #，URL 更清晰，适合需要 SEO 和干净 URL 的应用，但需要服务器支持 URL 重写。