Vue Router 中 Hash和 History 模式的核心区别、使用场景

核心区别对比

1. 原理机制

特性	Hash 模式	History 模式
URL 表现	`example.com/#/home`	`example.com/home`
原理	使用 URL 的 hash (`#`) 部分	使用 HTML5 History API
是否发送请求	hash 变化不发送请求	改变 URL 会发送请求
服务器要求	无特殊要求	需要服务器配置支持

2. 技术实现

// Hash 模式 (默认)
const router = new VueRouter({
  mode: 'hash',
  routes: [...]
})

// History 模式
const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

3. 兼容性

Hash 模式：兼容所有浏览器（包括 IE9）
History 模式：需要 IE10+，主要依赖 history.pushState()

使用场景推荐

✅ 选择 Hash 模式当：

项目无服务器控制权

静态托管（GitHub Pages、Netlify、Vercel）
CDN 静态部署

兼容性要求高

需要支持 IE9 等老旧浏览器
企业内网应用，用户浏览器版本不统一

简单项目/演示

原型开发
小型工具类应用
无需 SEO 的内部系统

✅ 选择 History 模式当：

需要 SEO 优化

电商网站、内容平台
搜索引擎需要抓取不同页面

追求更好的用户体验

去掉 URL 中的 #，更美观
社交媒体分享时 URL 更友好

有服务器配置权限

可以配置服务器 fallback
企业级应用，有运维支持

服务器配置示例

History 模式必须的服务器配置：

Nginx:

location / {
  try_files $uri $uri/ /index.html;
}

Apache (.htaccess):

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

Node.js (Express):

const history = require('connect-history-api-fallback')
app.use(history())

开发注意事项

Hash 模式特点：

// 监听路由变化
window.addEventListener('hashchange', () => {
  console.log('Hash changed:', window.location.hash)
})

// 手动修改 hash
window.location.hash = '/about'

History 模式特点：

// 编程式导航
router.push('/user')  // → example.com/user

// 需要处理 404 问题
// 服务器需返回 index.html 让前端路由接管

决策流程图

开始选择路由模式
    ↓
是否需要 SEO？ → 是 → 选择 History 模式
    ↓                        ↓
否                       能否配置服务器？
    ↓                        ↓
是否需要支持旧浏览器？       是 → 采用 History 模式
    ↓                        ↓
是 → 选择 Hash 模式    否 → 退回 Hash 模式
    ↓
部署到静态托管？
    ↓
是 → Hash 模式
    ↓
完成选择

实际项目建议

企业后台管理系统

通常选择 Hash 模式
原因：内网使用、无需 SEO、兼容性强、部署简单

电商/内容网站

推荐 History 模式
原因：需要 SEO、URL 美观、有运维团队支持

混合方案

// 根据环境自动选择
const mode = process.env.NODE_ENV === 'production' 
  ? 'history' 
  : 'hash'

const router = new VueRouter({
  mode,
  routes: [...]
})

常见问题

Q: History 模式出现 404 怎么办？

A: 配置服务器将所有路由重定向到 index.html

Q: 如何从 Hash 迁移到 History？

修改路由模式配置配置服务器支持更新所有硬编码的 hash 链接设置 301 重定向（可选）

Q: 两种模式可以共存吗？

A: 不可以，但可以通过环境变量动态切换

总结表格

维度	Hash 模式	History 模式
URL 美观度	差（有 #）	好
SEO 支持	差	好（需配置）
兼容性	完美	IE10+
部署复杂度	简单	需服务器配置
服务器要求	无	需支持 SPA
典型场景	后台系统、静态站点	官网、电商、需要 SEO 的站点

推荐原则：优先使用 History 模式，除非有明确的兼容性或部署限制。