Vue Router 主要有 3 种 路由模式。

在 Vue Router 3.x（对应 Vue 2）和 Vue Router 4.x（对应 Vue 3）中，虽然底层原理相同，但配置方式（API）略有不同。以下是详细的分类和原理解析：

---

1. Hash 模式 (Hash Mode)

这是默认的模式（在 Vue Router 3 中），也是最兼容的模式。

• URL 表现：URL 中带有 # 号。
  • 例如：http://www.example.com/#/user/id
• 原理：
  • 利用 window.location.hash 来读取和修改 URL。
  • 当 # 后面的哈希值发生变化时，浏览器不会向服务器发送请求，而是触发 hashchange 事件。Vue Router 监听这个事件来实现页面内容的无刷新切换。
• 优点：
  • 兼容性好：支持所有现代浏览器和老旧浏览器（如 IE8）。
  • 无需后端配置：因为 # 后面的内容不会被发送到服务器，服务器只处理 index.html，所以不需要在服务器端做任何特殊配置。
• 缺点：
  • URL 不美观：带有一个 # 号，看起来不像标准的 URL。
  • SEO 较差：虽然 Google 能够抓取 Hash 路由，但其他搜索引擎的支持程度不一。
• Vue Router 4 API：createWebHashHistory()

2. History 模式 (HTML5 Mode)

这是目前最常用的模式，利用了 HTML5 History API。

• URL 表现：URL 看起来和普通网站一样，没有 # 号。
  • 例如：http://www.example.com/user/id
• 原理：
  • 利用 HTML5 的 history.pushState 和 history.replaceState 方法。
  • 这两个 API 可以在不重新加载页面的情况下修改浏览器的历史记录栈和当前 URL。
• 优点：
  • URL 美观：符合标准 URL 规范，用户体验更好。
  • 功能更强：pushState 可以传递 state 对象，记录更多信息。
• 缺点 (重要)：
  • 需要后端配置支持：这是最大的坑。在单页应用（SPA）中，如果用户直接访问 http://www.example.com/user/id 或刷新该页面，浏览器会向服务器请求 /user/id 这个文件。如果服务器上没有这个文件（通常只有 index.html），服务器会返回 404 错误。
  • 解决方案：需要在服务器（Nginx, Apache, Node.js 等）上配置一个 Rewrite 规则：如果 URL 匹配不到任何静态资源，就统一返回 index.html，让前端 Vue Router 去处理路由逻辑。
• Vue Router 4 API：createWebHistory()

3. Abstract 模式 / Memory 模式

这是一种非浏览器环境下的模式。

• URL 表现：浏览器的地址栏 不会 发生变化。
• 原理：
  • Vue Router 在内存中维护一个路由历史栈，不依赖浏览器的历史记录。
• 适用场景：
  • Node.js 环境：用于服务端渲染 (SSR)。
  • 非浏览器环境：例如 Electron 应用、Weex 或某些测试环境。
  • Vue Router 3 中，如果检测到没有浏览器 API，会自动进入此模式。
• Vue Router 4 API：createMemoryHistory()

---

总结对比

开发建议：
通常在开发阶段或生产环境中，为了更好的用户体验和 SEO，推荐使用 History 模式（记得配置 Nginx/Apache）。如果是简单的内部工具或者不想折腾服务器配置，可以使用 Hash 模式。