javascript - 页面刷新后保留pushState历史记录

Question

我一直在开发一个使用 AJAX 和浏览器历史记录 API 进行导航的网站。

我已经能够使后退/前进按钮的导航正常工作，但单击刷新按钮后出现问题。

由于我存储了默认状态和页面标题，当 popstate 事件为 null 时要在其中引用，因此它会在页面重新加载时被覆盖。

例如，假设我的历史堆栈如下所示:

[索引，第 1 页，第 2 页]

在第 2 页上，如果我重新加载，默认状态将变为第 2 页。因此，如果我要向后导航，它最终会执行以下操作:

第 2 页 -> 第 1 页 -> 第 2 页

因为我的弹出支架处理程序设置为在状态为 null 时转到默认页面。

我确信其他人也遇到过这个问题，但我还没有找到任何明确的解决方案。大多数教程都保留了后退/前进的框架，并且从未提及刷新引起的问题。

我不确定对此有什么好的解决方案。有什么想法吗？

Answer 1

以防万一其他人偶然发现这个问题，我最终用replaceState解决了这个问题。

基本上只是将状态替换为初始页面加载的状态。然后一切都应该正常工作，而不必处理 popState 事件为空的情况。