单页应用中前端路由有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/#/homehash 改变时，页面不会重新加载不需要服务器配合，适合静态文件部署兼容性好，支持老旧浏览器（如 IE8+）
实现方式：
立即学习“前端免费学习笔记（深入）”；
监听 window.onhashchange 事件，根据 hash 值切换内容。
window.addEventListener('hashchange', () => { const hash = window.location.hash.slice(1); // 去掉 # if (hash === '/home') { document.getElementById('app').innerHTML = '首页
'; } else if (hash === '/about') { document.getElementById('app').innerHTML = '关于页
'; }});
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);}// 监听浏览器前进后退window.addEventListener('popstate', () => {renderView(location.pathname);});
// 渲染视图function renderView(path) {const app = document.getElementById('app');if (path === '/home') {app.innerHTML = '
首页
';} else if (path === '/about') {app.innerHTML = '关于页
';}}// 模拟点击跳转document.getElementById('link-home').addEventListener('click', (e) => {e.preventDefault();navigate('/home');});
Hash 与 History 的主要区别
URL 形式： Hash 有 #，History 没有，更符合传统 URL 风格服务器要求： Hash 无需配置；History 需要服务器将所有路由指向 index.html兼容性： Hash 支持更老浏览器；History 需要现代浏览器支持 History APISEO： History 模式对搜索引擎更友好（配合服务端渲染更好）事件机制： Hash 使用 hashchange；History 使用 popstate
选择哪种模式取决于项目需求。如果追求简洁 URL 且能配置服务器，推荐 History 模式。若需兼容老旧环境或快速上线，Hash 模式更省心。
基本上就这些。
以上就是HTML5代码如何实现路由切换 HTML5代码中Hash与History的区别的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1587234.html
微信扫一扫 
支付宝扫一扫 
