HTML5代码如何实现路由切换 HTML5代码中Hash与History的区别-html教程-PHP中文网

HTML5代码如何实现路由切换 HTML5代码中Hash与History的区别

絕刀狂花

发布： 2025-10-21 17:31:01

原创

458人浏览过

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

html5代码如何实现路由切换 html5代码中hash与history的区别

在单页应用（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 看起来更“干净”，没有 #。

Fliki

高效帮用户创建视频，具有文本转语音功能

151

查看详情

特点：

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>

登录后复制