Vue Router 路由模式

Vue Router 提供了三种路由模式：hash 模式 、history 模式 和abstract 模式 （在 Vue Router 4 中对应 createWebHashHistory、createWebHistory、createMemoryHistory）。它们的主要区别在于 URL 的表现形式、实现原理、对服务器配置的要求以及适用场景。

1. Hash 模式

URL 形式 ：使用 # 符号，例如 http://example.com/#/user。# 后面的部分称为 hash。
实现原理 ：基于浏览器的 hashchange 事件。当 URL 的 hash 部分发生变化时，浏览器会触发该事件，Vue Router 监听此事件来更新对应的视图。hash 的变化不会导致浏览器向服务器发送请求，因此不需要服务器端特殊配置。
特点：
- 兼容性好，支持所有浏览器（包括 IE）。
- 无需服务器支持，适合静态文件部署（如 GitHub Pages）。
- 缺点：URL 中带有 #，不够美观，且 SEO 不友好（搜索引擎通常忽略 hash 部分的内容）。
应用场景 ：
- 项目不需要 SEO（如内部管理系统、单页应用后台）。
- 部署环境无法配置服务器（如纯静态托管服务）。
- 需要兼容低版本浏览器（如 IE9 及以下）。

2. History 模式

URL 形式 ：正常的路径，例如 http://example.com/user，没有 #，看起来与传统多页应用一致。
实现原理 ：利用 HTML5 的 History API（pushState、replaceState 和 popstate 事件）。通过 history.pushState 改变 URL 而不刷新页面，同时监听 popstate 事件处理浏览器的前进后退。这种方式使 URL 更美观，但需要服务器端配合 ：因为当用户直接访问某个子路由（如 /user）或刷新页面时，浏览器会向服务器发送请求，服务器必须返回单页应用的入口文件（通常是 index.html），否则会出现 404 错误。
特点：
- URL 美观，无 #，用户体验更好。
- 对 SEO 相对友好（前提是服务端能正确渲染页面或配合 SSR/预渲染）。
- 需要服务器配置支持（如 Nginx 或 Apache 重写规则）。
- 兼容性稍差，不支持 IE9 及以下（History API 在这些浏览器中不可用）。
应用场景 ：
- 追求 URL 美观的项目。
- 项目需要 SEO（结合服务端渲染 SSR 或预渲染）。
- 能够自主配置服务器（如使用 Nginx、Node.js 等）。

3. Abstract 模式

URL 形式：不依赖浏览器 URL，完全在内存中管理路由。
实现原理 ：通过一个内存中的数组模拟浏览器的历史栈，不涉及实际的 URL 变化。在 Vue Router 中，该模式通过 createMemoryHistory 创建（Vue Router 4），在非浏览器环境（如 Node.js、小程序、Weex）中使用。
特点：
- 不依赖浏览器环境，适用于任何 JavaScript 运行环境。
- 没有 URL 显示，路由状态完全由代码控制。
- 在浏览器中一般不直接使用，但可用于测试或服务器端渲染（SSR）的初始路由匹配。
应用场景 ：
- 服务端渲染（SSR）时，在服务器端使用 abstract 模式处理路由。
- 非浏览器环境（如 NativeScript、Weex、小程序）。
- 单元测试中模拟路由行为。

总结对比

特性	Hash 模式	History 模式	Abstract 模式
URL 形式	带 `#`	标准路径	无 URL
实现原理	`hashchange` 事件	History API	内存历史栈
服务器配置	不需要	需要回退到 `index.html`	不涉及
SEO	差	较好（需配合 SSR）	无意义
兼容性	所有浏览器	IE10+	任何 JS 环境
适用场景	简单部署、无需 SEO	正式项目、需要 SEO	SSR、非浏览器环境、测试

如何在 Vue Router 中配置

Vue Router 3.x

javascript 复制代码

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

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

// abstract 模式（通常不直接配置，路由会根据环境自动降级）
const router = new VueRouter({
  mode: 'abstract',
  routes: [...]
});

Vue Router 4.x（使用函数创建）

javascript 复制代码

import { createRouter, createWebHashHistory, createWebHistory, createMemoryHistory } from 'vue-router';

// hash 模式
const router = createRouter({
  history: createWebHashHistory(),
  routes: [...]
});

// history 模式
const router = createRouter({
  history: createWebHistory(),
  routes: [...]
});

// abstract 模式（memory）
const router = createRouter({
  history: createMemoryHistory(),
  routes: [...]
});

选择建议

小型项目或个人项目：若部署简单，选 hash 模式；若追求 URL 美观且能配置服务器，选 history 模式。
企业级应用：通常选 history 模式，配合 Nginx 或 Node 服务器做回退处理，同时结合 SSR 或预渲染优化 SEO。
需要兼容低版本浏览器：只能用 hash 模式。
服务端渲染或非浏览器环境：使用 abstract 模式。