html5 history api 通过 pushstate、replacestate 和 popstate 实现无刷新页面跳转，提升 spa 流畅度。pushstate 向历史栈添加新状态，replacestate 修改当前状态，popstate 监听前进/后退操作。示例代码展示如何动态更新内容并同步 url，同时需服务器配置将所有请求重定向至主 html 文件。兼容性方面，现代浏览器广泛支持，旧浏览器可用 history.js polyfill。与 hash 路由相比，history api 提供更友好 url 和更好 seo，但需服务器配合；hash 路由兼容性强，无需服务端配置，但 url 不够美观。选择取决于项目需求和目标环境。
HTML5 History API 允许你操作浏览器的历史记录，而无需重新加载整个页面。这使得创建单页应用 (SPA) 成为可能，用户体验更流畅，响应速度更快。简单来说，它让你能像操作传统多页网站一样，通过前进、后退按钮浏览应用，但页面内容实际上是通过 JavaScript 动态更新的。
解决方案：
History API 主要提供了 pushState、replaceState 和 popstate 事件。
立即学习“前端免费学习笔记（深入）”；
-
pushState(state, title, url)：向历史记录栈添加一个新的状态。-
state：一个与历史记录项关联的 JavaScript 对象，用于存储状态信息。当用户通过前进/后退按钮导航时，这个对象会传递给popstate事件。 -
title：大多数浏览器会忽略这个参数，最好设置为null或空字符串。 -
url：新的 URL。这个 URL 不一定要指向实际存在的文件，但必须与当前页面同域。
-
-
replaceState(state, title, url)：修改当前历史记录项的状态。参数与pushState相同。
popstate事件：当用户通过浏览器的前进/后退按钮导航时触发。事件对象有一个state属性，包含了pushState或replaceState方法传递的状态对象。
下面是一个简单的例子，演示如何使用 History API 实现无刷新跳转：
// 获取内容区域
const contentDiv = document.getElementById('content');
// 模拟页面内容
const pages = {
'/home': 'Home Page
Welcome to the home page.
',
'/about': 'About Page
Learn more about us.
',
'/contact': 'Contact Page
Get in touch with us.
'
};
// 处理导航
function navigate(url) {
// 更新内容
contentDiv.innerHTML = pages[url] || '404 Not Found
';
// 使用 pushState 更新 URL
history.pushState({ url: url }, null, url);
}
// 监听 popstate 事件
window.addEventListener('popstate', (event) => {
if (event.state) {
// 更新内容
contentDiv.innerHTML = pages[event.state.url] || '404 Not Found
';
} else {
// 初始页面加载时，state 可能为 null
navigate(location.pathname); // 或者采取其他默认行为
}
});
// 初始加载时，根据 URL 显示内容
navigate(location.pathname);
// 绑定导航链接的点击事件 (示例)
document.addEventListener('click', (event) => {
if (event.target.tagName === 'A') {
event.preventDefault(); // 阻止默认链接行为
const url = event.target.getAttribute('href');
navigate(url);
}
});
这个例子中，我们首先定义了一个 pages 对象，模拟不同 URL 对应的页面内容。navigate 函数负责更新内容区域，并使用 pushState 更新 URL。popstate 事件监听器则在用户点击前进/后退按钮时更新内容。 注意，初始页面加载时，popstate 事件的 state 可能为 null，需要特殊处理。
History API 的兼容性如何？
History API 在现代浏览器中得到了广泛支持，包括 Chrome、Firefox、Safari、Edge 等。但是，对于一些较老的浏览器，可能需要使用 polyfill 来提供支持。一个常用的 polyfill 是 history.js，它可以模拟 History API 的行为，使你的代码在旧浏览器中也能正常运行。
如何处理服务器端路由？
在使用 History API 创建 SPA 时，一个常见的问题是服务器端路由。由于 SPA 只有一个 HTML 文件，当用户直接访问一个非根 URL（例如 /about）时，服务器需要返回这个 HTML 文件，而不是返回 404 错误。这通常需要在服务器端配置路由规则，将所有请求都重定向到你的 HTML 文件，然后由客户端 JavaScript 代码来处理 URL 并显示相应的内容。例如，在使用 Node.js 和 Express 时，你可以使用以下代码来配置路由：
const express = require('express');
const path = require('path');
const app = express();
const port = 3000;
app.use(express.static('public')); // 假设你的静态文件（包括 HTML 文件）在 public 目录下
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'public', 'index.html')); // 返回你的 HTML 文件
});
app.listen(port, () => {
console.log(`Example app listening on port ${port}`);
});这段代码会将所有 GET 请求都重定向到 index.html 文件。
History API 和 Hash 路由有什么区别？
另一种常见的 SPA 路由方式是使用 Hash 路由（即 URL 中包含 # 符号）。Hash 路由的优点是兼容性更好，不需要服务器端配置。但是，Hash 路由的 URL 不太美观，并且不利于 SEO。History API 提供了更优雅的解决方案，可以创建更友好的 URL，并且对 SEO 更友好。
虽然 History API 更加现代，但如果你的应用需要支持非常老的浏览器，或者你不想配置服务器端路由，Hash 路由仍然是一个可行的选择。选择哪种路由方式取决于你的具体需求和目标。
