12.1 路由核心模式：hash 模式、history 模式、memory 模式原理与区别

Vue Router 是 Vue 官方提供的路由管理器，它允许你在不刷新页面的情况下切换视图，让单页应用（SPA）拥有像多页应用一样的 URL 导航体验。这种“无刷新跳转”的背后，是浏览器提供的几种路由模式在起作用。Vue Router 4 支持三种核心模式：hash 模式、history 模式和 memory 模式，它们各自适用于不同的场景，选择对的路由模式能避免大量线上故障。

hash 模式（默认模式）

原理
hash 模式利用 URL 中的 hash 部分（即 # 号后面的内容）来模拟路由。例如 https://example.com/#/user/123 中，#/user/123 就是 hash 值。hash 的变化不会触发浏览器向服务器发送请求，也不会导致页面重新加载——它只会触发 hashchange 事件。Vue Router 监听了这个事件，当 hash 变化时，根据新 hash 匹配对应的组件并渲染到 <router-view> 中，整个过程完全在前端完成，服务器对 # 后的内容一无所知。

import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
  ]
})
// 实际访问的URL：http://localhost/#/about

特点与适用场景

兼容性好：所有浏览器都支持，哪怕是 IE9。
不需要服务器配置：因为请求 URL 永远只包含 # 之前的部分（即 https://example.com/），服务器总是返回同一个 index.html，后续路由匹配完全由前端接管。部署时把打包好的文件扔到静态服务器即可，无需担心刷新 404 问题。
URL 不够美观：路径中始终有个 #，在某些需要纯净 URL 的场景（如对外分享的营销页面）可能不合适。
SEO 不友好：搜索引擎爬虫通常不会处理 hash，无法抓取 # 后的内容进行索引。因此 hash 模式几乎不用于对 SEO 有严格要求的站点。

一句话总结：最简单的路由方案，零配置无痛部署，适合后台管理系统、工具类应用等对 URL 美观度和 SEO 没有特殊要求的项目。

history 模式（HTML5 模式）

原理
history 模式利用了 HTML5 的 History API（包括 pushState()、replaceState() 和 popstate 事件）来实现 URL 跳转而不刷新页面。通过 pushState 修改地址栏 URL 时，浏览器不会向服务器发送请求，页面的 DOM 也不会重新加载，Vue Router 在监听到 URL 变化后，匹配对应组件并渲染。因此，网站的 URL 看起来和普通多页网站一模一样：https://example.com/user/123，没有难看的 #。

import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
  ]
})
// 实际访问的URL：http://localhost/about

特点与适用场景

URL 美观且 SEO 友好：搜索引擎爬虫看到的就是标准的多页 URL，可以正常索引每个“页面”的内容（同时配合 SSR 或预渲染效果更佳）。
需要服务器配置支持：这是 history 模式最容易踩的坑。因为浏览器会把这些路径当成真正的服务器路径去请求，如果用户直接访问 https://example.com/user/123 或刷新页面，服务器上并没有 user/123 这个物理文件，就会返回 404。正确的做法是在服务器端将所有路由都 fallback（回退）到 index.html，由前端路由接管。各种服务器的配置如下：
Nginx：try_files $uri $uri/ /index.html;
Apache：在 .htaccess 中配置 RewriteRule 回退
Node.js (Express)：app.use(history())（使用 connect-history-api-fallback 中间件）
开发环境：Vite 和 Vue CLI 的 dev server 已经内置了这个回退机制，所以开发时不会出现 404。
兼容性要求：需要浏览器支持 HTML5 History API（IE 10+）。现代浏览器几乎都支持，所以这个限制基本可忽略。

一句话总结：线上部署时必须配置服务器回退，否则刷新就 404；但换来的是干净的 URL 和 SEO 能力，适合对公众访问的官网、博客、电商等前台应用。

memory 模式（Node.js 环境专用）

原理
memory 模式将路由的历史记录完全存储在内存中的数组里，不依赖浏览器的地址栏 URL，也不会改变真实的 URL。它的实现基于 createMemoryHistory 函数，内部自己维护了一个路由位置栈（location stack），所有的导航操作（router.push、router.replace、router.go）都只修改这个内存中的记录，对浏览器的地址栏没有任何影响。这个模式主要在非浏览器环境下使用，例如 Node.js 服务端渲染（SSR）或单元测试，在这些环境中没有 window 和浏览器地址栏，不能使用 hash 或 history。

import { createRouter, createMemoryHistory } from 'vue-router'
const router = createRouter({
  history: createMemoryHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
  ]
})
// 整个导航过程中，浏览器地址栏始终不变，所有路由状态保存在内存

特点与适用场景

没有 URL，全是数组：无法通过 URL 直接访问某个路由页面，也不存在 URL 分享或书签功能。
主要用于 SSR 和测试：在服务端渲染中，服务器需要根据用户请求的 URL 解析出匹配的组件，然后生成 HTML 返回给客户端，这一解析过程正是通过 memory 模式的路由实例完成的（客户端「水合」后换成 history 或 hash 模式）。在单元测试中，我们需要模拟路由跳转但又没有真实的浏览器环境，memory 模式是最佳选择。
浏览器环境中几乎不用：因为无法看到或输入 URL，用户无法刷新、前进后退，没有任何用户交互意义。

一句话总结：内存路由专门为服务端和测试而生，普通前端开发者基本不会直接在业务代码中使用它。

三种模式对比速查

| 模式 | URL 示例 | 修改地址栏 | 服务器配置要求 | 浏览器兼容性 | 主要适用场景 |
|------|----------|------------|---------------|-------------|-------------|
| hash | /#/user/1 | 是 | 不需要 | IE9+ | 后台系统、工具页面 |
| history | /user/1 | 是 | 必须配置回退 | IE10+ | 官网、电商、需要 SEO 的 C 端应用 |
| memory | 无变化 | 否 | 不需要 | 无浏览器依赖 | SSR、单元测试 |

如何选择

不管你用什么模式，Vue Router 的编程接口（router.push、router-link、路由守卫等）是保持一致的，切换模式只需修改创建 history 对象的那一行代码。所以很多时候可以先从 hash 模式起步，省去部署配置的麻烦；当产品需要上线面向普通用户时，再由运维配置好服务器回退，切换到 history 模式。这个 “渐进式” 选择正是 Vue Router 灵活性的体现。