一、哈希模式
特点
- URL 格式：通过
#符号标识路由，例如https://example.com/#/home - 实现原理：利用
window.location.hash监听哈希变化，哈希后的内容不会发送到服务器 - 兼容性：兼容所有浏览器（包括 IE9）
优点
- 无需服务器配置：直接部署即可使用，适合静态托管（如 GitHub Pages）
- 天然防刷新 404：服务器始终返回
index.html，路由由前端解析
缺点
- URL 不美观：
#符号影响视觉体验 - SEO 不友好：部分爬虫可能忽略
#后的内容（需配合 SSR 优化）
配置示例（Vue Router）
const router = new VueRouter({
mode: "hash", // 默认模式，可不写
routes: [...]
})
二、历史模式
特点
- URL 格式：无
#，例如https://example.com/home - 实现原理：基于 HTML5 History API（
pushState/replaceState） - 兼容性：需要 IE10+ 或现代浏览器
优点
- URL 简洁美观：符合传统 URL 习惯
- SEO 更友好：完整路径可被爬虫抓取（仍需配合 SSR）
缺点
- 需服务器支持：刷新或直接访问子路由时可能返回 404，需配置服务器重定向
- 部署复杂度高：需确保所有路径回退到
index.html
配置示例（Vue Router）
const router = new VueRouter({
mode: "history", // 显式启用历史模式
routes: [...]
})
三、关键对比表
| 特性 | 哈希模式 | 历史模式 |
|---|---|---|
| URL 格式 | 含 #（如 /#/home） |
无 #（如 /home） |
| 服务器配置 | 无需特殊处理 | 需配置重定向到 index.html |
| 浏览器兼容性 | 兼容所有浏览器 | IE10+ 或现代浏览器 |
| SEO 支持 | 需额外处理 | 需配合 SSR |
| 部署场景 | 静态托管、无法改服务器时使用 | 自有服务器或支持 SPA 的托管 |
四、服务器配置
Nginx 配置
location / {
try_files $uri $uri/ /index.html;
}---
五、如何选择？
- 优先历史模式：若项目需要美观 URL、支持 SEO，且能控制服务器配置（如部署到自有服务器）
- 降级哈希模式：若使用静态托管（GitHub Pages、Netlify）、无法修改服务器配置，或需兼容老旧浏览器
欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 1701220998@qq.com
