如何在不更改浏览器历史记录的情况下更改 url

Question

到目前为止，我只知道如果我想在不重新加载整个页面的情况下更改 URL，我必须使用 HTML 浏览器 history API。

我在我的网站中使用了这个概念。让我们举个例子。假设用户在这个页面上

 https://www.example.com/aboutus

然后他转到我们有过滤器的产品列表。单击任何过滤器系统会生成类似这样的新网址

https://www.example.com/products?brands[]=song&brands[]=samsung&condition[]=new

内部只是调用

history.pushState({}, 'Title', link.href);

但是，它有一个问题。单击back 按钮会转到上一个过滤器。 我不想要这个功能。我想要，在单击浏览器后退按钮时，它应该转到current 页面之前的页面。在我们的例子中，它应该采取

https://www.example.com/aboutus

谢谢。

Answer 1

您正在寻找replaceState()，它会替换历史中的当前位置，而不是像pushState() 那样推送一个新位置

history.replaceState({}, 'Title', link.href);

来自MDN

history.replaceState() 的操作与history.pushState() 完全相同 除了replaceState() 改为修改当前历史条目 创建一个新的。

replaceState() 在您想要更新 当前历史条目的状态对象或 URL 以响应某些 用户操作。

记住，some functions are not available on older browsers。但是有一个library 这可以帮助你。