巧用 history.go()、history.length 让单页应用返回到历史指定页面

单页应用程序 (SPA) 是一种流行的开发框架，它使用 JavaScript 在单个 HTML 页面中动态加载和渲染内容。这使得 SPA 能够提供无缝的用户体验，因为页面不必在每次导航时重新加载。然而，SPA 也面临着一些挑战，其中一个挑战是如何在不刷新页面的情况下返回到历史中的特定页面。

传统的 web 应用是通过刷新页面来实现页面间的跳转，而在 SPA 中，页面内容的改变不会触发页面的刷新。这就意味着，如果用户在 SPA 中点击返回按钮，他们只会返回到上一个路由，而不是历史中特定的页面。

为了解决这个问题，我们可以使用 history.go() 和 history.length 这两个 API。history.go() 方法允许我们向前或向后导航历史记录，而 history.length 属性则返回历史记录中的页面数量。

例如，如果我们想要返回到历史中的第三个页面，我们可以使用以下代码：

history.go(-2);

这将使浏览器返回到历史中的第三个页面。如果我们想要返回到历史中的最后一个页面，我们可以使用以下代码：

history.go(-1);

同样，如果我们想要返回到历史中的第一个页面，我们可以使用以下代码：

history.go(1);

除了使用 history.go() 方法，我们还可以使用 history.pushState() 和 history.replaceState() 方法来控制历史记录。history.pushState() 方法将一个新的条目添加到历史记录中，而 history.replaceState() 方法则替换历史记录中的当前条目。

这两种方法可以用来实现无刷新导航。例如，如果我们想要在不刷新页面的情况下导航到某个页面，我们可以使用以下代码：

history.pushState({}, '', '/page-2');

这将创建一个新的历史记录条目，并将浏览器重定向到 /page-2 页面。如果我们想要在不刷新页面的情况下替换当前页面，我们可以使用以下代码：

history.replaceState({}, '', '/page-2');

这将替换当前的历史记录条目，并将浏览器重定向到 /page-2 页面。

通过使用 history.go(), history.pushState() 和 history.replaceState() 这三个 API，我们可以轻松地在单页应用中实现无刷新导航，从而提供更流畅的用户体验。