哈希路由通过#管理路径，兼容性好且无需服务器配置，但SEO差；History路由使用标准URL，利于SEO但需服务端支持。1. 哈希路由依赖hashchange事件，URL变化不触发请求；2. History路由利用pushState和popstate实现无刷新跳转；3. 前者部署简单，后者需fallback配置；4. 对SEO和美观要求高选History，快速开发或老旧环境选哈希。
在现代前端开发中，路由系统是构建单页应用（SPA）的核心部分。JavaScript 提供了两种主流的客户端路由实现方式：哈希路由（Hash Router）和基于 History API 的路由（History Router）。它们各有特点，适用于不同的场景。
哈希路由（Hash Router）
哈希路由依赖 URL 中的 # 符号及其后的内容（即 hash 部分）来管理视图跳转，不会触发页面刷新。
特点如下：
- URL 中 # 后的变化不会发送请求到服务器
- 兼容性好，支持老版本浏览器（如 IE8+）
- 无需服务器配置，部署简单
- SEO 不友好，搜索引擎可能无法正确索引 hash 内容
- URL 不够美观，例如：https://example.com/#/user/profile
监听方式通过 window.onhashchange 实现：
立即学习“Java免费学习笔记（深入）”；
window.addEventListener('hashchange', () => { const route = window.location.hash.slice(1); // 获取 # 后路径 navigate(route); });History API 路由（History Router）
基于 HTML5 的 History API（如 pushState、replaceState 和 popstate 事件），可以操作浏览器历史记录并更新 URL 而不刷新页面。
优点包括：
- URL 干净美观，例如：https://example.com/user/profile
- 更利于 SEO，配合服务端渲染效果更佳
- 支持前进后退等完整导航行为
需要处理的问题：
- 必须配置服务器，将所有前端路由指向 index.html
- 低版本浏览器（如 IE9）不支持，需降级处理
使用示例：
// 跳转但不刷新页面 history.pushState({}, '', '/user/profile');// 监听浏览器前进/后退 window.addEventListener('popstate', () => { navigate(location.pathname); });
对比总结
两者核心区别在于 URL 结构、浏览器兼容性和服务器要求：
- URL 形式：哈希路由带 #，History 路由是标准路径
- 服务器依赖：哈希路由无需配置；History 路由需服务端支持 fallback 到首页
- SEO 支持：History 路由更优，尤其结合 SSR 时
- 开发复杂度：History 路由对前后端协同要求更高
如何选择？
如果项目需要良好的 SEO 和优雅的 URL，且能控制服务器配置，推荐使用 History API 路由。如果是内部系统、快速原型或需兼容老旧环境，哈希路由更省心。
基本上就这些，根据实际需求权衡即可。
