当前位置：首页 > news >正文

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

news 2025/9/12 10:18:52

引言

在 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 / 测试