Javascript 在window.history中防止重复实例

我有一个主页，您可以在其中加载到容器中的其他页面。 加载页面时，您仍在主页面上，但浏览器URL应设置为加载页面的URL。 关闭加载的页面时，URL应重置为主页的URL

我想通过简单地使用

history.replaceState

或

pushState

来解决这个问题，而不必返回浏览器历史记录（因为返回会导致某些浏览器刷新并扰乱滚动）

我目前的解决办法是

clickLoadPage => (pageUrl) { 
    closeOtherLoadedPages();
    if (isOnMainPage())
        pushState(pageUrl)
    else
        replaceState(pageUrl)
 } 
clickUnloadPage => () {
    replaceState(mainpageUrl);
}

注意：它被设计为在任何时候只加载一个页面。 示例：第一次加载第1页。然后加载第2页。预期效果：page1关闭，url替换为page2。在这种状态下，返回浏览器将返回主页url

问题是，每次加载一个新页面，然后关闭它时，一个新的主页状态会添加到窗口历史记录中。这些州应该只有一个，但我最终有几个

---

有没有其他方法可以解决这个问题？我对

窗口不太熟悉。历史记录
api，是否可以执行诸如删除状态或确保不添加重复状态之类的操作？
关闭页面时，可以从历史记录中调用方法以弹出状态，因此url将改为上一个

如果您已经打开了第1页，并且想要打开第2页，则需要调用方法将已打开的页关闭为历史记录中的弹出状态，然后再打开另一页。
我采用了此解决方案，是避免添加太多历史状态的唯一方法。这只是给其他阅读本文的人的一个提示：当您使用“替换”和“返回”多次导航到同一url时，您推送或替换到window.history的每个指令都必须是唯一的-否则API似乎认为它们是重复的，您可能会看到back按钮的奇怪行为。我通过将datetime.now添加到我在window.history中推/替换的所有对象来解决这个问题