Vue Router 作为 Vue.js 官方的路由管理器，支持多种路由模式以适配不同环境和需求。正确选择路由模式不仅影响 URL 的美观性，还关系到应用的部署方式、SEO 表现以及浏览器兼容性。目前 Vue Router 主要提供三种模式：hash 模式、history 模式 和 abstract 模式。理解它们的实现原理与适用场景，是构建健壮单页应用（SPA）的基础。
Hash 模式：兼容性最强的前端路由方案
Hash 模式是 Vue Router 的默认模式（在 Vue Router 3 中），其核心依赖于 URL 中的 # 符号及其后的内容（即“片段标识符”）。例如：https://example.com/#/user/profile。
工作原理
浏览器不会将 # 后的内容发送给服务器，因此无论 #/xxx 如何变化，服务器始终只收到 / 请求。前端通过监听 hashchange 事件感知 URL 变化，并根据 hash 值匹配对应路由组件进行渲染。
优点
- 无需服务器配置：所有路由请求均由前端处理，适合静态托管（如 GitHub Pages、OSS）；
- 兼容性极佳：支持 IE9+ 及所有现代浏览器；
- 部署简单：直接上传 HTML 文件即可运行。
缺点
- URL 不够“干净”，含有
#，影响美观； - 对 SEO 不友好（尽管现代爬虫已能执行 JS，但传统搜索引擎仍可能忽略 hash 内容）；
- 无法利用 HTTP 状态码进行服务端错误处理（如 404）。
适用于对 SEO 要求不高、追求快速部署或需兼容老旧浏览器的项目。
History 模式：更自然的 URL 体验
History 模式基于 HTML5 的 History API（pushState、replaceState 和 popstate 事件），可实现无刷新的 URL 变更，且不包含 #。例如：https://example.com/user/profile。
工作原理
当调用 router.push() 时，Vue Router 使用 history.pushState() 修改浏览器地址栏，同时更新页面内容而不触发页面刷新。用户点击浏览器前进/后退按钮时，会触发 popstate 事件，Vue Router 据此重新匹配路由。
优点
- URL 简洁美观，符合传统网站习惯；
- 更利于 SEO（搜索引擎可正常抓取路径）；
- 支持完整的 HTTP 语义（如自定义 404 页面）。
缺点
- 必须配置服务器：若用户直接访问
/user/profile，服务器需将所有前端路由请求重定向到index.html，否则返回 404； - 不支持 IE9 及以下版本。
典型服务器配置示例（Nginx）：
location / {
try_files $uri $uri/ /index.html;
}
适用于对用户体验和 SEO 有较高要求的现代 Web 应用，前提是具备服务器配置权限。
Abstract 模式：非浏览器环境的路由方案
Abstract 模式是一种内存级路由模式，不依赖浏览器的 URL 或 History API，而是将路由状态保存在 JavaScript 对象中。它主要用于 非浏览器环境，如 Node.js 服务端渲染（SSR）、测试环境或 Electron 等桌面应用。
特点
- 不修改浏览器地址栏；
- 路由变更仅在内存中生效；
- 无法通过 URL 直接访问特定页面（除非配合 SSR 注入初始状态）。
在 Vue Router 4 中，若检测到非浏览器环境（如 typeof window === 'undefined'），会自动切换为 abstract 模式。开发者通常无需手动指定。
使用场景
- 服务端渲染（Nuxt.js、Vue SSR）中预渲染路由；
- 单元测试中模拟路由行为；
- 构建不依赖浏览器 API 的跨平台应用。
普通 Web 项目一般不会主动使用此模式。
三种模式对比总结
| 特性 | Hash 模式 | History 模式 | Abstract 模式 |
|---|---|---|---|
| URL 格式 | /#/path |
/path |
无（内存存储） |
| 服务器配置 | 无需 | 必须（重定向到 index.html） | 无需 |
| 浏览器兼容性 | IE9+ | IE10+（需 polyfill） | 任意 JS 环境 |
| SEO 友好度 | 较低 | 高 | 不适用 |
| 适用环境 | 浏览器 | 浏览器 | 非浏览器（Node、测试等） |
如何选择？
- 快速原型或静态部署 → 选 hash 模式；
- 正式产品、重视 SEO 与用户体验 → 选 history 模式（确保服务器正确配置）；
- SSR、测试或桌面应用 → 由框架自动处理，通常为 abstract 模式。
需要注意的是，在 Vue Router 4 中，创建路由器时需显式指定 history 选项：
import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router';
// Hash 模式
const router = createRouter({
history: createWebHashSJistory(),
routes: [...]
});
// History 模式
const router = createRouter({
history: createWebHistory(),
routes: [...]
});
合理选择路由模式，是构建专业级 Vue 应用的第一步。
