防止window.history中的重复实例

Question

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

我想通过简单地使用history.replaceState或pushState解决这个问题，而不必回到浏览器历史记录中（因为返回会导致某些浏览器刷新并混乱滚动）。< / p>

我目前的解决方案是

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

注意：它的设计只能随时加载一个页面。 示例：首先加载page1。然后加载page2。所需效果：page1关闭，url被page2替换。在该状态下，返回浏览器将返回主页面URL。

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

有可能以其他方式解决这个问题吗？我不熟悉window.history api，是否可以执行删除状态或确保不添加重复状态的操作？

Answer 1

当关闭页面时，您可以调用history.back()方法从历史记录中弹出状态，因此网址将更改为上一个。

如果您已打开第1页并且想要打开第2页，则需要调用方法关闭已打开的页面以从历史记录中弹出状态，然后才打开另一页面。