深入理解 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 和测试,不会改变浏览器地址栏。
相关推荐
kkkkk0211063 小时前
黑马微服务保险(一)
笔记·微服务·架构
青鱼入云3 小时前
TraceId如何在Spring-Cloud微服务的REST调用中传递
微服务·架构·链路追踪
你的电影很有趣4 小时前
lesson76:Vue.js 核心特性详解:事件处理、计算属性与侦听器
javascript·vue·1024程序员节
周杰伦_Jay7 小时前
【常用设计模式全解析】创建型模式(聚焦对象创建机制)、结构型模式(优化类与对象的组合关系)、行为型模式(规范对象间的交互行为)
设计模式·架构·开源·交互·1024程序员节
知识分享小能手7 小时前
uni-app 入门学习教程,从入门到精通,uni-app 企业项目实战:鲁嗑瓜子项目开发知识点(9)
前端·javascript·学习·微信小程序·小程序·uni-app·vue
周杰伦_Jay8 小时前
【Elasticsearch 全解析】分布式搜索引擎的原理、实践与优化
大数据·分布式·elasticsearch·架构·开源·1024程序员节
赋创小助手8 小时前
“短小精悍”的边缘AI算力利器:超微SYS-E403-14B-FRN2T服务器评测
服务器·人工智能·科技·ai·架构·边缘计算·1024程序员节
oak隔壁找我9 小时前
JavaScript 模块化演进历程:问题与解决方案。
前端·javascript·架构
社会底层无业大学生10 小时前
uniapp微信小程序简单表格展示
微信小程序·小程序·uni-app·vue·1024程序员节
王嘉俊92513 小时前
HarmonyOS 超级终端与服务卡片开发:打造无缝多设备交互体验
华为·架构·harmonyos·arkts·1024程序员节