面试题：Vue Router 支持哪几种路由模式？它们有什么区别？

Vue Router 支持两种主要的路由模式，用于在单页面应用（SPA）中实现无刷新的页面切换：

实现方式：使用 URL 的 hash（#）部分来模拟一个完整的 URL。例如：http://example.com/#/home 或 http://example.com/#/user/123。
原理：
- # 后面的内容（hash）不会发送到服务器。浏览器只会将 http://example.com/ 部分发送给服务器。
- 因此，无论 hash 如何变化，服务器都返回同一个 HTML 文件（通常是 index.html）。
- Vue Router 监听 hashchange 事件，当 hash 改变时，根据路由规则动态渲染对应的组件。
优点：
- 无需服务器配置：由于 hash 不会发送到服务器，所以后端服务器无需做任何特殊配置，部署简单。
- 兼容性好：支持所有现代浏览器，包括较老的版本。
缺点：
- URL 不够美观：URL 中带有 #，看起来不够“专业”或“干净”。
- 不符合传统 URL 语义：# 传统上用于页面内锚点跳转。

实现方式：利用 HTML5 的 History API（pushState, replaceState 等）来实现 URL 的变化，不包含 #。例如：http://example.com/home 或 http://example.com/user/123。
原理：
- 使用 history.pushState() 和 history.replaceState() 方法来改变浏览器地址栏的 URL，同时不会向服务器发送请求。
- 浏览器不会刷新页面，Vue Router 捕获 URL 变化并更新视图。
- 当用户直接访问某个路由（如 http://example.com/about）或刷新页面时，浏览器会向服务器请求该路径。
优点：
- URL 美观：生成的 URL 看起来和传统的多页面应用一样，没有 #，更加简洁和专业。
- 符合 RESTful 风格：URL 结构更清晰，有利于 SEO（虽然 SPA 的 SEO 仍需额外处理）。
缺点：
- 需要服务器配置：这是最关键的限制。服务器必须配置为：对于所有前端路由的路径，都返回 index.html 文件。否则，当用户直接访问 /about 时，服务器会尝试查找 /about 这个资源，找不到就会返回 404 错误。
- 服务器配置示例：
  - Node.js (Express):
```
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'index.html'));
});
```
  - Nginx:
```
location / {
  try_files $uri $uri/ /index.html;
}
```
  - Apache (.htaccess):
```
RewriteEngine On
RewriteRule ^ index.html [QSA,L]
```

模式	URL 示例	实现 API	服务器要求	优点	缺点
Hash	`http://example.com/#/home`	`window.location.hash`, `hashchange`	无需配置	兼容性好，部署简单	URL 不美观
History	`http://example.com/home`	`history.pushState()`, `replaceState()`	必须配置回退到 `index.html`	URL 美观，符合传统	需要服务器支持

在 Vue Router 中，可以通过 createWebHashHistory() 和 createWebHistory() 来创建对应的路由实例。

THE END