前端路由的两种主要实现方式（History API 与 Hash 路由）在底层机制和应用场景上存在显著差异，具体分析如下：
一、URL 表现形式差异
1.Hash 路由
-
URL 中带有 # 符号（如 example.com/#/home），# 后的内容不会发送到服务器
-
仅改变 # 后的部分即可触发路由切换，兼容性极佳（支持 IE8+）
2.History 路由
-
URL 为普通路径格式（如 example.com/home），视觉更简洁
-
需依赖 HTML5 的 pushState/replaceState API（IE10+支持）
二、底层实现原理
| 特性 | Hash 路由 | History 路由 |
|---|---|---|
| 监听事件 | hashchange 事件 | popstate 事件 |
| API 操作 | 修改 location.hash | history.pushState()/replaceState() |
| 服务器请求 | 不会触发（仅客户端行为） | 需服务器配置避免 404 |
| 历史记录管理 | 不会新增历史记录 | 可精确控制历史栈 |
三、核心应用场景对比
1.Hash 路由适用场景
-
静态部署或无后端配合的项目（如 GitHub Pages）
-
需兼容旧浏览器的场景
2.History 路由适用场景
-
SEO 友好型项目（完整 URL 可被爬虫抓取）
-
需要精细控制导航历史的 SPA 应用
四、关键注意事项
-
History 路由的 404 问题：需配置服务器将所有路径重定向到 index.html
-
Hash 路由的锚点冲突：避免与页面内锚点（如 #section1）命名冲突
-
Vue/React 框架选择：可通过 mode 参数切换路由模式（如 Vue Router 的 mode: 'history'）
