Hash和History的区别

Hash 模式

核心原理

利用 URL 中 # 后面的哈希值，通过浏览器 hashchange 事件监听哈希变化，前端匹配路由渲染页面，页面无刷新。

URL 格式

http://xxx.com/#/home

特点

1. # 后的哈希部分不会发给后端服务器，仅前端识别；
2. 路由切换监听 hashchange 事件；
3. 部署无需后端配置，直接放静态资源即可；
4. 兼容性极好，支持 IE8+；
5. URL 带 #，不够美观，对 SEO 略有影响。

History 模式

核心原理

基于 HTML5 History API：pushState / replaceState 手动修改浏览器历史记录和 URL，通过 popstate 监听浏览器前进后退，前端匹配路由渲染。

URL 格式

http://xxx.com/home

特点

1. URL 无 #，简洁标准，友好 SEO；
2. 依赖 pushState/replaceState + popstate 事件；
3. 刷新、直接地址栏访问时会请求后端，必须配置服务器，所有路径重定向到 index.html，否则 404；
4. 仅支持 IE10+ 现代浏览器；
5. 路由更规范，和后端接口路径观感一致。

核心原理对比表

对比维度	Hash 模式	History 模式
底层依赖	hashchange 事件	History API + popstate 事件
URL 标识	带 #	无 #，正常路径
网络请求	哈希变化不触发后端请求	刷新 / 直访会发起后端请求
服务器配置	无需配置	必须配置重定向，防止 404
兼容性	IE8+	IE10+
SEO 友好度	一般	优秀
部署难度	简单	稍复杂

一句话本质区别

• Hash：借 # 锚点特性，纯前端劫持路由，和服务器无关；
• History：借 H5 历史 API 篡改地址栏，需要服务器兜底兼容刷新。