HTML5路由与HashHistory对比解析

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《HTML5路由实现与Hash History对比解析》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

单页应用中前端路由有Hash和History两种模式。1. Hash模式通过URL中的#部分实现，改变hash不触发页面刷新，兼容性好，无需服务器配置，适用于老旧浏览器；2. History模式利用HTML5的pushState和replaceState API，URL更美观且对SEO友好，但需服务器支持避免404错误，依赖现代浏览器。选择依据项目需求：追求URL简洁且可配服务器用History，注重兼容性和快速部署选Hash。

在单页应用（SPA）中，页面切换不刷新整个页面，而是通过前端路由实现视图的动态更新。HTML5 提供了两种主流方式来实现前端路由：Hash 模式和 History 模式。它们各有特点，适用于不同场景。

Hash 模式

Hash 模式利用 URL 中的 # 号及其后面的部分（即 hash 值）来控制路由变化。浏览器不会将 hash 部分发送到服务器，因此改变 hash 不会引发页面刷新。

特点：

• URL 中带有 #，例如：http://example.com/#/home
• hash 改变时，页面不会重新加载
• 不需要服务器配合，适合静态文件部署
• 兼容性好，支持老旧浏览器（如 IE8+）

实现方式：

监听 window.onhashchange 事件，根据 hash 值切换内容。

window.addEventListener('hashchange', () => {
  const hash = window.location.hash.slice(1); // 去掉 #
  if (hash === '/home') {
    document.getElementById('app').innerHTML = '<h1>首页</h1>';
  } else if (hash === '/about') {
    document.getElementById('app').innerHTML = '<h1>关于页</h1>';
  }
});

History 模式

History 模式使用 HTML5 新增的 History API（如 pushState 和 replaceState）来修改 URL 而不刷新页面。URL 看起来更“干净”，没有 #。

特点：

• URL 更美观，例如：http://example.com/home
• 需要服务器配置支持，避免刷新 404 错误
• 依赖现代浏览器（IE10+）
• 可添加真正的历史记录，支持前进后退

实现方式：

使用 history.pushState() 修改 URL 并添加记录，监听 popstate 处理浏览器前进后退。

// 路由跳转
function navigate(path) {
  history.pushState({}, '', path);
  renderView(path);
}
<p>// 监听浏览器前进后退
window.addEventListener('popstate', () => {
renderView(location.pathname);
});</p><p>// 渲染视图
function renderView(path) {
const app = document.getElementById('app');
if (path === '/home') {
app.innerHTML = '<h1>首页</h1>';
} else if (path === '/about') {
app.innerHTML = '<h1>关于页</h1>';
}
}</p><p>// 模拟点击跳转
document.getElementById('link-home').addEventListener('click', (e) => {
e.preventDefault();
navigate('/home');
});</p>

Hash 与 History 的主要区别

• URL 形式： Hash 有 #，History 没有，更符合传统 URL 风格
• 服务器要求： Hash 无需配置；History 需要服务器将所有路由指向 index.html
• 兼容性： Hash 支持更老浏览器；History 需要现代浏览器支持 History API
• SEO： History 模式对搜索引擎更友好（配合服务端渲染更好）
• 事件机制： Hash 使用 hashchange；History 使用 popstate

选择哪种模式取决于项目需求。如果追求简洁 URL 且能配置服务器，推荐 History 模式。若需兼容老旧环境或快速上线，Hash 模式更省心。

基本上就这些。

好了，本文到此结束，带大家了解了《HTML5路由与HashHistory对比解析》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！