前端路由原理及特点
在前端开发中，路由主要用于实现单页应用（SPA）中不同页面视图的切换，而无需重新加载整个页面。常见的前端路由实现方式主要有两种：哈希路由（Hash Router） 和 历史路由（History Router），它们的核心区别在于 URL 的表现形式和底层实现原理。
1. 哈希路由（Hash Router）
原理
基于 URL 中的 # 符号（哈希值）实现。# 后面的内容不会被发送到服务器，仅在客户端生效，浏览器会根据哈希值的变化触发 hashchange 事件，前端可以监听这个事件来实现视图切换。
特点
- URL 中包含
#符号，例如：http://example.com/#/home、http://example.com/#/about - 哈希值的变化不会导致浏览器向服务器发送请求
- 兼容性极好，支持所有现代浏览器及 IE8 等旧版本浏览器
- 无需服务器配置支持，直接部署即可使用
缺点
- URL 中带有
#，不够美观 - 哈希值无法被搜索引擎正确识别（对 SEO 不友好）
- 功能相对简单，无法使用 HTTP 方法（如 GET、POST）传递状态
2. 历史路由（History Router）
原理
基于 HTML5 新增的 History API（pushState()、replaceState() 等方法）实现。通过这些 API 可以修改浏览器的历史记录栈，改变 URL 而不触发页面刷新，同时通过监听 popstate 事件（如前进/后退按钮）实现视图切换。
特点
- URL 格式与传统 URL 一致，不包含
#，例如：http://example.com/home、http://example.com/about - 可以通过
pushState()添加历史记录，replaceState()替换当前记录 - 对 SEO 友好，URL 更符合用户习惯
- 支持使用 HTTP 方法传递状态，功能更强大
缺点
- 兼容性稍差，不支持 IE9 及以下版本浏览器
- 当用户直接刷新页面或通过 URL 访问子路由时，浏览器会向服务器发送请求，因此需要服务器配置支持（将所有路由请求指向单页应用的入口文件，如
index.html），否则会出现 404 错误
其他路由方式
除了上述两种主流方式，还有一些特殊场景的路由实现：
- 内存路由（Memory Router）：不依赖 URL，路由状态存储在内存中，适用于非浏览器环境（如 React Native）或特殊需求场景。
- 基于框架的路由：现代前端框架（如 React Router、Vue Router）通常封装了上述两种路由方式，提供更便捷的 API（如声明式路由、路由守卫等），但底层仍基于哈希或 History API。
总结对比
| 特性 | 哈希路由（Hash Router） | 历史路由（History Router） |
|---|---|---|
| URL 格式 | 带 #（如 #/home） | 正常 URL（如 /home） |
| 服务器依赖 | 无需配置 | 需要配置（避免 404） |
| 兼容性 | 极好（支持 IE8+） | 较好（支持 IE10+） |
| SEO 友好性 | 差 | 好 |
| 功能丰富度 | 简单 | 强大（支持 HTTP 状态等） |
实际开发中，历史路由因 URL 美观和 SEO 优势更常用，但需要配合服务器配置；哈希路由则适合快速开发或兼容性要求极高的场景。