单页应用中前端路由有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 = '首页
';
} 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 API
- SEO： History 模式对搜索引擎更友好（配合服务端渲染更好）
- 事件机制： Hash 使用 hashchange；History 使用 popstate
选择哪种模式取决于项目需求。如果追求简洁 URL 且能配置服务器，推荐 History 模式。若需兼容老旧环境或快速上线，Hash 模式更省心。
基本上就这些。
