深入理解 Vue3 Router：三种路由模式的工作原理与实战应用

引言

在 Vue 3 中，路由由 Vue Router 4 管理，支持三种模式：Hash 模式 、History 模式 和 Memory 模式 。

本文将详细介绍三种模式的实现原理、优缺点、使用场景，并对比它们的底层实现方法。

---

1. Hash 模式（createWebHashHistory）

创建方式

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

URL 示例

https://example.com/#/about

工作原理

• 基于浏览器的 location.hash。
• 通过监听 hashchange 事件来感知 URL 的变化。
• # 后的部分不会被浏览器发送到服务器。

底层实现方法

• location.hash = '#/about'
• window.addEventListener('hashchange', callback)

优缺点

✅ 优点：

• 不依赖后端配置，刷新不会 404。
• 简单、快速。

❌ 缺点：

• URL 不够美观（有 #）。
• SEO 较差。

---

2. History 模式（createWebHistory）

创建方式

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

URL 示例

https://example.com/about

工作原理

• 基于 HTML5 History API。
• 通过 pushState / replaceState 修改浏览器历史记录。
• 监听 popstate 事件来感知返回/前进操作。

底层实现方法

history.pushState({}, '', '/about') // 修改地址栏
window.addEventListener('popstate', callback) // 监听前进/后退

优缺点

✅ 优点：

• URL 美观。
• SEO 友好。

❌ 缺点：

• 必须有后端支持，否则刷新可能会报 404。

Nginx 配置示例

location / {
  try_files $uri $uri/ /index.html;
}

---

3. Memory 模式（createMemoryHistory，旧称 Abstract 模式）

创建方式

import { createRouter, createMemoryHistory } from 'vue-router'

const router = createRouter({
  history: createMemoryHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

URL 示例

（不会改变地址栏，仍然是当前页面 URL）

工作原理

• 路由信息只存储在 内存 中。
• 不依赖 window.location，不会修改浏览器地址栏。

底层实现方法

• 内部用一个 JS 对象来维护当前路由状态（模拟栈结构）。
• 类似：

let historyStack = []
historyStack.push('/about')

使用场景

• SSR（服务端渲染）：保证每个请求有独立的路由状态。
• 单元测试：不需要浏览器地址栏。

优缺点

✅ 优点：

• 可运行在 Node.js、JSDOM 等环境。
• 不依赖浏览器 API。

❌ 缺点：

• 地址栏不会变化。
• 不适合浏览器端作为主要模式。

---

📌 三种模式对比

模式	API	URL 示例	刷新依赖后端	底层实现方式	使用场景
Hash	createWebHashHistory()	/#/about	❌	location.hash + hashchange	中小项目
History	createWebHistory()	/about	✅	pushState / replaceState + popstate	中大型项目
Memory	createMemoryHistory()	（URL 不变）	❌	内存栈结构（JS 对象维护路由状态）	SSR / 测试

---

总结

• Hash 模式 ：依赖 location.hash，最简单，适合快速上线的项目。
• History 模式 ：依赖 pushState / replaceState，URL 美观，需后端支持，适合大型应用。
• Memory 模式：依赖内存存储，主要用于 SSR 和测试，不会改变浏览器地址栏。