Vue Router 提供了三种主要的路由模式，用于控制应用程序中 URL 的行为和呈现方式：

1. 哈希模式（Hash Mode）

• 默认的路由模式。
• 在 URL 中使用哈希标记（#）来管理路由，如 http://example.com/#/route。
• 优点是对服务器要求较低，因为哈希部分不会被发送到服务器。
• 缺点是不太美观，且不支持直接访问特定路由，需要客户端 JavaScript 来进行路由解析。

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

2. 历史模式（History Mode）

• 通过 HTML5 History API 来管理路由，不使用哈希标记。
• 优点是 URL 更美观，且可以直接访问特定路由，不需要哈希标记。
• 缺点是需要服务器配置，以确保在刷新或直接访问路由时，服务器正确处理这些 URL。

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

3. 抽象模式（Abstract Mode）

• 主要用于非浏览器环境，如服务器端渲染（SSR）或 Electron 等桌面应用。
• 不涉及浏览器 URL，而是直接操作路由历史栈。

const router = new VueRouter({
  mode: 'abstract',
  routes: [...],
});

总结

默认情况下，Vue Router 使用哈希模式（Hash Mode），因此如果你不显式指定模式，应用程序将使用哈希路由。根据你的项目需求和服务器配置，你可以选择使用哈希模式或历史模式。

当使用历史模式时，请确保服务器正确处理路由，以避免刷新或直接访问 URL 时出现 404 错误。通常需要配置服务器以将所有路由请求重定向到应用程序的入口点，以便 Vue Router 可以正确处理这些路由。这在前一条回答中有详细说明。

抽象模式通常用于非浏览器环境，如服务器端渲染或桌面应用，这些情况下不需要浏览器 URL 来管理路由。