# 简介
Vue Route中，路由共有history、hash、abstract三种模式，本章节我们一起分析下三种路由模式的实现原理。
# History 模式
history 路由模式，它使用 HTML5 History API 来管理浏览器历史记录，并处理客户端导航而无需页面重新加载。这使得你可以创建更干净的 URL，不包含哈希（#）符号，使你的应用程序 URL 更像传统的 URL。例如：http://example.com/about
# 优点
- 干净的URL：使用
history模式，路由中的 URL 不再包含哈希符号（#）。相比使用哈希模式，URL 更加干净、直观，更符合传统的 URL 风格。 - 无刷新导航：在
history模式下，当用户进行导航时，页面不会发生刷新。这是因为HTML5 History API允许在浏览器历史记录中添加和修改历史条目，从而实现无刷新的前端导航。 - 支持前进和后退：使用
history模式，用户可以通过浏览器的前进和后退按钮进行导航，就像传统的网页导航一样。这使得用户体验更加自然和直观。 - 便于SEO优化：相对于哈希模式，在
history模式下，路由中的 URL 更具有意义，更容易被搜索引擎索引和解析。这有助于提高应用程序的搜索引擎优化（SEO）。
# 缺点
- 服务器配置：为了支持
history模式，需要对服务器进行配置，以确保在直接访问路由中的 URL 或刷新页面时能够正确地返回相应的页面。 - 兼容性：
HTML5 History API在大多数现代浏览器中得到良好支持，但在一些较旧的浏览器中可能不完全支持。为了确保最佳用户体验，需要考虑对较旧浏览器的兼容性处理。
# Hash 模式
hash模式是Vue Router 3 默认的路由模式，也是在不配置服务器重定向的情况下，最简单的一种路由方式。在哈希模式下，URL 中的路由会被格式化为带有 "#/" 前缀的哈希片段，例如：http://example.com/#/about。当用户导航到不同的路由时，不会触发页面的完整刷新，而是只会改变 URL 中的哈希部分，从而更新页面内容，这样可以防止浏览器向服务器发送新的请求。
# 优点
- 简单易用：哈希模式是最简单的路由模式，不需要额外的服务器配置，开发者可以直接在前端定义路由规则。
- 兼容性良好：哈希模式可以在所有支持 JavaScript 的浏览器中正常运行，包括一些古老的浏览器。
- 防止页面刷新：在哈希模式下，当用户进行路由切换时，URL 中的哈希部分改变，但浏览器不会向服务器发送新的请求，只是更新页面内容，从而防止页面的完整刷新，提升用户体验。
# 缺点
- 不够美观：哈希模式的 URL 中包含 "#/" 前缀，例如：
http://example.com/#/about，这些哈希符号在一些用户看来可能不太友好。 - SEO 不友好：搜索引擎爬虫通常不会解析 URL 中的哈希部分，这意味着在哈希模式下，搜索引擎可能无法正确地索引和收录页面，从而影响搜索引擎优化（SEO）。
- 历史管理困难：在哈希模式下，虽然 URL 改变，但浏览器的访问历史不会改变，这可能会导致一些浏览器特性，如后退按钮的行为，不符合用户的预期。
- 安全性考虑：某些情况下，哈希模式下的敏感信息可能会暴露在 URL 中，虽然在实际开发中可以避免，但仍需要考虑安全性问题。
# Abstract 模式
abstract模式并不涉及真实的 URL，而是通过管理栈的方式来进行导航和路由管理。这种模式对于在非浏览器环境中使用 Vue Router 3 很有用，比如在 Native App 中使用 Vue.js。
# 优点
- 无需真实的 URL：在抽象模式下，不需要处理真实的 URL，因此可以避免 URL 相关的问题和处理，适用于一些非浏览器环境。
- 自定义导航：由于抽象模式是通过栈的方式进行导航，可以实现高度自定义的导航逻辑，灵活性较高。
- 适用于 Native App 等非浏览器环境：抽象模式可以用于在 Native App 或其他非浏览器环境中使用 Vue.js 进行路由管理，这样可以将 Vue.js 用于更多类型的应用。
# 缺点
- 无法直接分享链接：由于抽象模式不涉及真实的 URL，因此无法直接分享特定页面的链接。这可能会影响用户体验，因为用户无法通过复制链接来分享页面状态。
- 不符合 Web 常规：Web 应用通常使用 URL 来标识不同的页面和状态，
abstract模式下无法做到这一点，可能会导致不符合 Web 常规的设计。