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

引言

在 Vue 3 中,路由由 Vue Router 4 管理,支持三种模式:Hash 模式History 模式Memory 模式

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


1. Hash 模式(createWebHashHistory

创建方式

js 复制代码
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

创建方式

js 复制代码
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 事件来感知返回/前进操作。

底层实现方法

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

优缺点

优点

  • URL 美观。
  • SEO 友好。

缺点

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

Nginx 配置示例

nginx 复制代码
location / {
  try_files $uri $uri/ /index.html;
}

3. Memory 模式(createMemoryHistory,旧称 Abstract 模式)

创建方式

js 复制代码
import { createRouter, createMemoryHistory } from 'vue-router'

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

URL 示例

复制代码
(不会改变地址栏,仍然是当前页面 URL)

工作原理

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

底层实现方法

  • 内部用一个 JS 对象来维护当前路由状态(模拟栈结构)。
  • 类似:
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 和测试,不会改变浏览器地址栏。
相关推荐
罗亚方舟1 小时前
微服务故障排查
微服务·云原生·架构
深度学习实战训练营1 小时前
MnasNet:NAS 自动架构搜索
架构
hello_2506 小时前
云原生架构与GitOps技术栈介绍
云原生·架构
赵渝强老师9 小时前
【赵渝强老师】MongoDB的分布式存储架构
分布式·mongodb·架构
Tadas-Gao10 小时前
微服务可观测性的“1-3-5”理想:从理论到实践的故障恢复体系
java·开发语言·微服务·云原生·架构·系统架构·可观测
数据智能老司机10 小时前
建构 AI Agent 应用——Agentic 系统的学习机制
架构·llm·agent
brzhang10 小时前
把网页的“好句子”都装进侧边栏:我做了个叫 Markbox 的收藏器,开源!
前端·后端·架构
岁岁岁平安11 小时前
SpringBoot3+WebSocket+Vue3+TypeScript实现简易在线聊天室(附完整源码参考)
java·spring boot·websocket·网络协议·typescript·vue
上园村蜻蜓队长11 小时前
ARM芯片架构之coresight 时间戳组件介绍
arm开发·架构
数据智能老司机12 小时前
建构 AI Agent 应用——编排
架构·llm·agent