单页应用（SPA）是一种流行的 Web 应用程序开发模式，它能够提供更好的用户体验和更快的页面加载速度。SPA 通常使用 AJAX 和 JavaScript 动态更新页面内容，而不是在每个页面之间进行完整的页面刷新。
HTML5 History API 是一组 JavaScript API，它可以让我们使用 JavaScript 控制浏览器的历史记录，并且在不进行完整页面刷新的情况下更新页面内容。在这篇文章中，我们将学习如何使用 HTML5 History API 实现 SPA 页面路由。
HTML5 History API 概述
HTML5 History API 包含了以下几个关键的方法和属性：
history.pushState(state, title, url)：将一个新的状态（state）和 URL 添加到浏览器的历史记录中。history.replaceState(state, title, url)：用一个新的状态（state）和 URL 替换当前的历史记录项。window.onpopstate：在浏览器的历史记录发生变化时触发的事件。history.state：获取当前的状态对象。
使用这些 API，我们可以在不进行完整页面刷新的情况下更新页面内容，同时还可以在浏览器的历史记录中添加或替换条目。
实现 SPA 页面路由
在 SPA 中，我们通常需要根据 URL 的变化来更新页面内容。我们可以通过监听 window.onpopstate 事件来实现这一点。在这个事件中，我们可以获取到当前的状态对象，并根据状态对象来更新页面内容。
下面是一个简单的 SPA 页面路由示例：
-- -------------------- ---- -------
--------- -----
------
------
---------- ---- --------------
-------
------
----
------ ----------------------
------ ----------------------------
------ --------------------------------
-----
---- -------------------
--------
-------- ------------- -
----------
-------------- -- ----------------
---------- -- -
----- ------- - -----------------------------------
----------------- - -----
---
-
-------- --------------------- -
----- ----- - ------------
-- ------- -
--------------------
- ---- -
--------------
-
-
----------------------------------- ----------------
------------------------------------------- -- -
------------------------------ ----- -- -
-----------------------
----- --- - --------------------------
----- ----- - ---------------
------------------- --- -- ------ -----
--------------
---
---
---------
-------
-------在这个示例中，我们首先定义了一个 loadPage 函数，它将一个 URL 加载到页面中。我们还定义了一个 handlePopState 函数，在这个函数中，我们获取当前的状态对象，并根据状态对象来更新页面内容。
在页面加载时，我们将 handlePopState 函数添加到 window.onpopstate 事件中。这样，当用户点击浏览器的“前进”或“后退”按钮时，我们就可以在不进行完整页面刷新的情况下更新页面内容。
最后，我们还监听了所有的链接点击事件，并使用 history.pushState 方法来将新的 URL 添加到浏览器的历史记录中。这样，当用户点击这些链接时，我们就可以在不进行完整页面刷新的情况下更新页面内容。
总结
使用 HTML5 History API，我们可以实现 SPA 页面路由，从而提供更好的用户体验和更快的页面加载速度。在实现 SPA 页面路由时，我们需要监听 window.onpopstate 事件，并根据状态对象来更新页面内容。同时，我们还需要使用 history.pushState 方法来将新的 URL 添加到浏览器的历史记录中。
如果你正在开发一个 SPA 应用程序，那么使用 HTML5 History API 来实现页面路由是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f85ad1d10417a2223ecca0