在现代化的单页面应用 (SPA) 中，最重要的一个特性就是能够在不进行刷新页面的情况下，更新用户在浏览器中所看到的视图。为此，SPA 需要通过前端路由来完成页面跳转和视图更新的操作。其中，HTML5 History API 就是一种非常常见的前端路由方式。
什么是 HTML5 History API？
HTML5 History API 可以让我们在浏览器中操作浏览器历史记录，从而实现单页面应用中的页面切换。在 HTML5 之前，我们只能通过 hash 模式的路由来实现 SPA 中的路由管理。这种方式会导致 URL 中充斥着大量的 # 号，不够美观。而 HTML5 History API 则可以让我们不用 # 号实现更加优雅的 URL 管理。
通过 HTML5 History API，我们可以改变浏览器中的 URL 地址栏的内容，而不会改变页面的加载和渲染。例如，我们可以通过以下方式来修改 URL：
history.pushState(state, title, url);
其中，state 表示一个状态对象，title 表示新页面的标题，url 表示新页面的 URL。调用了 pushState() 方法后，URL 的后缀会变成设置的 url 参数。
如何使用 HTML5 History API？
在 SPA 项目中，使用 HTML5 History API 的方式类似于以下这样：
// 监听单页面路由切换
window.addEventListener("popstate", handleRouteChange);
// 手动修改 URL
history.pushState(state, title, url);我们通过监听 "popstate" 事件，来捕捉到用户导航前进、后退和 history.pushState() 的调用事件。这样就可以根据 URL 的变化来判断当前需要展示哪个页面。
使用 HTML5 History API 的注意事项
在使用 HTML5 History API 的过程中，需要注意以下几点：
- 如果使用 HTML5 History API 的话，则必须有一个后端服务器配合，来确保在用户在地址栏中输入 URL 时，能够正确返回对应的页面。
- 在改变 URL 时，需要考虑到布局的深度，否则会因为错误的 URL 而导致视图无法更新。
- 在修改了 URL 后，需要手动触发路由切换。这可以通过调用对应的单页面应用框架或库中提供的路由转换 API 实现。
一个简单的 HTML5 History API 示例
下面，我们来看一个简单的 HTML5 History API 示例，以帮助读者更好地理解该 API 的使用方式和注意事项：
// javascriptcn.com 代码示例
// 监听路由变化
window.addEventListener("popstate", () => {
console.log("路由发生变化");
});
// 修改 URL，但不触发路由变化
history.pushState({}, "page1", "/page1");
// 修改 URL，并触发路由变化
history.pushState({}, "page2", "/page2");
window.dispatchEvent(new PopStateEvent("popstate"));在该示例中，我们首先通过 addEventListener() 方法来监听路由升变化，在 URL 变化时，会打印 "路由发生变化"。接着，我们调用了 pushState() 方法来修改 URL。但是，由于此时并没有手动触发路由变化，所以不会打印 "路由发生变化"。最后，我们手动触发路由变化，从而使得打印函数生效。
总结
HTML5 History API 是这许多现代 SPA 中使用最广泛的一种前端路由方式。通过对该 API 的深入了解，开发者不仅可以更好地使用 HTML5 History API，同时也可以对前端路由的开发有更深入的认识和理解。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65434aba7d4982a6ebcf5dab