哈希路由利用URL中#后的内容实现视图切换，兼容性好且无需服务器配置，但URL不美观且不利于SEO；2. 历史记录路由基于HTML5的History API，URL简洁且利于SEO，但需服务器配置支持；3. 选择依据项目需求：静态部署或无需SEO选哈希路由，追求用户体验和SEO且可配置服务器则选历史路由。
在现代前端开发中，路由系统是单页应用（SPA）的核心部分。它允许用户在不重新加载页面的情况下切换视图，提升用户体验。JavaScript 中常见的两种前端路由实现方式是哈希路由（Hash Router）和历史记录路由（History Router）。它们各有特点，适用于不同场景。
哈希路由（Hash Router）
哈希路由依赖 URL 中的 hash 部分（即 # 后面的内容）来管理视图切换。浏览器不会将 hash 发送到服务器，也不会因 hash 变化而触发页面刷新。
工作原理：通过监听 window.onhashchange 事件，当 URL 的 hash 改变时，JavaScript 捕获该变化并渲染对应视图。
- URL 示例：
https://example.com/#/home - 优点：兼容性好，无需服务器配置，适合静态站点
- 缺点：URL 不够美观，# 后内容不参与 HTTP 请求，不利于 SEO
- 适用场景：简单的 SPA、演示项目或无法配置服务器的情况
历史记录路由（History Router）
基于 HTML5 的 History API（pushState、replaceState 和 popstate 事件），历史路由可以操作浏览器历史记录并更新 URL 而不刷新页面。
立即学习“Java免费学习笔记（深入）”；
工作原理：使用 history.pushState() 修改地址栏路径，通过监听 popstate 处理前进后退。
- URL 示例：
https://example.com/home - 优点：URL 干净美观，支持完整的路径结构，更利于 SEO
- 缺点：需要服务器配合，确保所有路由都返回同一个 HTML 入口文件（如 index.html）
- 适用场景：正式上线的 SPA 项目，尤其是需要良好 SEO 和用户体验的应用
如何选择？
选择哪种路由方式取决于项目需求和部署环境。
- 若项目部署在静态服务器（如 GitHub Pages），且无需 SEO，哈希路由更简单可靠
- 若追求更好的用户体验和搜索引擎优化，并能配置服务器，应使用历史路由
- 主流框架如 React Router、Vue Router 都同时支持两种模式，切换只需配置
基本上就这些。理解两者的机制和差异，能帮助你在实际项目中做出合适的选择。不复杂但容易忽略的是服务器配置问题——用 history 模式时，404 错误往往就是因为没做好 fallback 处理。
