前端路由Hash与History模式详解前言在现代前端开发中，单页面应用（SPA）已成为主流。SPA 的核心在于“前端

前言

在现代前端开发中，单页面应用（SPA）已成为主流。SPA 的核心在于“前端路由”，即在不刷新页面的情况下切换视图。前端路由主要有两种实现方式：Hash 模式和 History 模式。本文将系统梳理两者的原理、优缺点、适用场景及常见问题，助你深入理解并灵活运用。

一、Hash 模式

1.1 原理

Hash 模式利用 URL 的 #（哈希）符号，# 后的内容称为 fragment identifier。浏览器不会将其发送给服务器，前端通过监听 hash 变化实现路由切换。例如：

https://example.com/#/home

页面不会因 # 后内容变化而刷新。

1.2 实现方式

监听 window.onhashchange 事件，哈希变化时渲染对应页面。
通过 location.hash 获取/设置当前路由。

1.3 优点

兼容性极好，支持 IE9 及以下。
部署简单，无需后端配合。
刷新页面不会 404。

1.4 缺点

URL 带 #，不美观，不利于 SEO。
只能用哈希传递路由信息，功能有限。

1.5 适用场景

兼容性要求高的项目。
静态页面或无需后端支持的项目。

1.6 代码示例

window.addEventListener('hashchange', function() {
  const hash = location.hash.slice(1);
  render(hash);
});

function render(route) {
  // 路由渲染逻辑
}

二、History 模式

2.1 原理

History 模式基于 HTML5 的 History API，通过 pushState、replaceState 和 popstate 实现路由切换。例如：

https://example.com/home

URL 更加美观，无 #。

2.2 实现方式

使用 history.pushState 或 replaceState 改变 URL。
监听 window.onpopstate，响应前进/后退。

2.3 优点

URL 美观，利于 SEO（需 SSR）。
支持更丰富的路由功能。

2.4 缺点

需服务器支持，所有路由需返回 index.html，否则刷新 404。
兼容性略低于 Hash（IE10+ 支持）。

2.5 适用场景

需要美观 URL 和 SEO 的项目。
可配置服务器的项目。

2.6 代码示例

window.addEventListener('popstate', function() {
  const path = location.pathname;
  render(path);
});

function navigate(path) {
  history.pushState({}, '', path);
  render(path);
}

function render(route) {
  // 路由渲染逻辑
}

三、Hash 与 History 对比

特性	Hash 模式	History 模式
URL 美观	否（有 #）	是
SEO	差	好（需 SSR）
兼容性	极好	一般（IE10+）
服务端配置	不需要	需要
刷新 404	不会	可能（需配置）

四、常见问题与解决方案

4.1 History 模式刷新 404

原因：服务器未做路由兜底配置，直接返回 404。

解决：服务器需配置所有路由都返回 index.html，由前端接管。

4.2 Hash 模式 SEO 差

原因：搜索引擎通常不抓取 # 后内容。

解决：如需 SEO，建议用 History + SSR。

五、总结

Hash 模式简单易用，兼容性好，适合静态页面和无需 SEO 的项目。
History 模式 URL 美观，利于 SEO，但需服务器支持，适合现代 Web 应用。
选择哪种模式需结合项目需求、兼容性和 SEO 要求综合考虑。

前端路由Hash与History模式详解

前言