在 Vue.js 中，路由（Vue Router）主要负责将 URL 路径与对应的组件进行映射。目前最常用的两种工作模式是 Hash 模式 和 Web History 模式。
理解这两者的区别，对于项目的部署和用户体验至关重要。
1. Hash 模式 (Default)
这是 Vue Router 的默认模式。它使用 URL 中的哈希符号（#）来模拟一个完整的 URL。
- URL 表现：例如
http://example.com/#/home。 - 工作原理：
#及其后面的字符被称为 hash。- 最核心的点在于：hash 的改变不会触发网页重载，也不会被包含在 HTTP 请求中发往服务器。
- 浏览器通过监听
hashchange事件来感知路径变化，从而让 Vue 动态渲染对应的组件。
特点：
- 兼容性极好：支持几乎所有浏览器。
- 无需后端配合：因为服务器只会收到
#之前的请求，所以不需要额外的服务器配置。
2. Web History 模式 (HTML5)
这是目前单页面应用（SPA）的主流选择，它让 URL 看起来和普通的网站路径一模一样。
- URL 表现：例如
http://example.com/home。 - 工作原理：
- 利用了 HTML5 的 History API（主要是
pushState和replaceState方法）。 - 这些方法允许开发者在不重新加载页面的情况下，修改浏览器的历史记录栈和地址栏。
特点：
- 美观：没有奇怪的
#符号。 - SEO 友好：比 Hash 模式更有利于搜索引擎爬虫。
- 致命伤（需配置）：如果用户直接在浏览器地址栏输入路径或刷新页面，浏览器会真实地向服务器请求这个路径。如果后端没有配置，就会返回 404 错误。
解决方案：后端需要配置一个“全捕获”路由，即如果请求的资源不存在，统一返回
index.html。
3. 核心对比
| 特性 | Hash 模式 | History 模式 |
|---|---|---|
| URL 格式 | /#/user/1 |
/user/1 |
| 底层原理 | window.onhashchange |
history.pushState |
| SEO | 较差 | 较好 |
| 服务器端配置 | 不需要 | 必须配置（重定向到首页） |
| 兼容性 | 极佳 | 需支持 HTML5 的浏览器 |
4. 如何选择？
- 如果你只是做个简单的后台管理系统，或者不想折腾服务器配置，Hash 模式 是最稳妥的选择。
- 如果你追求极致的用户体验和 SEO，并且有权限配置 Nginx 或 Node.js 服务器，History 模式 是行业标准。
💡 进阶：Vue 3 中的定义方式
在 Vue 3 中，这两种模式分别通过 createWebHashHistory() 和 createWebHistory() 来创建：
import { createRouter, createWebHistory } from 'vue-router'const router = createRouter({history: createWebHistory(), // 切换为 Web History 模式routes: [// ...],
})