前端路由是现代单页应用（SPA）的核心技术之一，它允许在不刷新页面的情况下动态切换视图，提升用户体验。其中，Hash模式和History模式是两种主流实现方式。本文将深入探讨它们的原理、优缺点及适用场景，帮助开发者更好地选择适合项目的路由方案。
路由实现原理
Hash模式通过URL中的哈希值（#后的部分）实现路由切换。浏览器不会将哈希部分发送到服务器，因此页面不会刷新。当哈希变化时，触发hashchange事件，前端据此更新视图。History模式则基于HTML5的History API，通过pushState和replaceState方法修改URL路径，配合popstate事件实现无刷新跳转。由于路径不带#，更接近传统URL形式，但对服务器配置有要求。
URL美观性对比
Hash模式的URL中必然包含#符号，显得不够简洁，可能影响用户体验。History模式的URL则与普通网页无异，例如"/home"比"#/home"更直观。但History模式需确保服务器支持，否则直接访问子路由会返回404错误，通常需配置重定向到首页。
兼容性与部署成本
Hash模式兼容性极佳，支持所有主流浏览器，甚至包括IE8。部署时无需额外配置，适合快速上线的项目。History模式依赖HTML5 API，最低支持IE10，且需服务器配合（如Nginx的try_files规则）。若项目需兼容老旧浏览器或缺乏服务器控制权，Hash模式更稳妥。
SEO友好性差异
搜索引擎通常忽略#后的内容，导致Hash模式的页面难以被收录。History模式由于URL结构完整，更利于SEO优化。若项目依赖搜索引擎流量（如官网、博客），History模式是更优选择，但需配合服务端渲染（SSR）或静态化方案进一步提升效果。
开发体验与功能扩展
History模式的路由库（如React Router、Vue Router）功能更丰富，支持嵌套路由、动态路由等高级特性。Hash模式虽然基础功能完备，但在复杂场景下可能需自行处理路径编码等问题。History模式可轻松集成SSR，而Hash模式与服务器渲染的配合较为困难。