前端路由核心：Hash 与 History 模式的原理及区别
单页应用（SPA）实现 "无刷新切换视图" 的核心是前端路由，其主流方案 Hash 模式与 History 模式，基于不同的浏览器特性构建，底层原理和核心区别如下：
一、核心原理拆解
1. Hash 模式：基于 URL 哈希值的锚点机制
Hash 模式的核心是利用 URL 中 # 后面的 "哈希值" 特性：
- 哈希值（如 https://xxx.com/#/home 中的 /home）仅在客户端生效，浏览器解析 URL 时，会将 # 及后续内容视为 "锚点标识"，不会随 HTTP 请求发送到服务器；
- 当哈希值发生变化（如点击导航切换 #/home 到 #/about）时，浏览器会触发 hashchange 事件，前端路由监听该事件后，解析新的哈希值，匹配对应的路由规则并渲染目标视图；
- 即使页面刷新，浏览器仅请求主域名对应的入口文件（如 index.html），哈希值仍保留在 URL 中，路由可通过解析哈希值恢复对应视图。
2. History 模式：基于 HTML5 History API 的历史记录操作
History 模式依托 HTML5 新增的 History API（pushState()、replaceState()）实现，核心逻辑如下：
- 通过 history.pushState(state, title, url) 可向浏览器历史记录栈中添加一条新记录，同时修改 URL 路径（如 https://xxx.com/home），不会触发页面刷新或服务器请求；
- history.replaceState() 则用于替换当前历史记录栈中的记录，同样不触发刷新；
- 当用户点击浏览器前进 / 后退按钮时，会触发 popstate 事件，前端路由监听该事件后，解析当前 URL 路径，匹配路由规则并渲染视图；
- 关键限制：该模式下的 URL 是 "真实路径"，若直接输入路径或刷新页面，浏览器会向服务器发送该路径的资源请求，需服务器配合配置才能避免 404 错误。
二、核心区别对比表
|-----------|---------------------------------|-------------------------------------------|
| 对比维度 | Hash 模式 | History 模式 |
| URL 格式 | 包含 # 号，如 https://xxx.com/#/home | 无 # 号，如 https://xxx.com/home |
| 底层依赖 | 浏览器原生锚点机制，无需额外 API | HTML5 History API（pushState/replaceState） |
| 服务器请求行为 | 哈希值不发送到服务器，仅请求主入口文件 | 直接输入 / 刷新时，请求对应路径的服务器资源 |
| 触发路由变化的事件 | hashchange 事件 | popstate 事件（前进 / 后退触发） |
| 兼容性 | 兼容所有浏览器（含 IE6/7 等低版本） | 仅兼容 IE10+ 及现代浏览器（依赖 HTML5） |
| 原生锚点冲突 | 与页面原生锚点（如 #footer）冲突 | 不影响原生锚点使用 |
| 路由参数格式 | 参数暴露在哈希值中（如 #/user?id=1） | 参数嵌入路径（如 /user/1），更规范 |