Question

我想在没有页面刷新的情况下替换网址。

我需要改变：

https://example.com/en/step1

到

https://example.com/en/step2

怎么做？

Answer 1

<强>更新

基于Manipulating the browser history，将空字符串作为pushState方法的第二个参数（ aka title ）传递应该可以安全地防止将来对方法进行更改，因此它可以＃39最好像这样使用pushState：

history.pushState(null, '', '/en/step2');

您可以在上述文章中了解更多相关信息

原始答案

像这样使用history.pushState：

history.pushState(null, null, '/en/step2');

更新2 以回答 Idan Dagan 的评论：

为什么不使用history.replaceState()？

来自MDN

history.replaceState（）与history.pushState（）完全相同，只是replaceState（）修改当前历史记录条目而不是创建新条目

这意味着如果您使用replaceState，则会更改网址，但用户无法使用浏览器的“后退”按钮返回上一页。状态（因为replaceState没有向历史记录添加新条目）并且不推荐它并提供不良的用户体验。

更新3 以添加 window.onpopstate

因此，当这个答案引起你的注意时，这里有关于操纵浏览器历史记录的其他信息，在使用pushState之后，您可以使用window.onpopstate这样检测后退/前进按钮导航：< / p>

window.onpopstate = function(e) {
    // ... 
};

由于pushState的第一个参数是一个对象，如果您传递object而不是null，则可以在onpopstate中访问该对象，这非常方便，这是如何：

window.onpopstate = function(e) {
    if(e.state) {
        console.log(e.state);
    }
};

更新4 以添加Reading the current state：

当您的页面加载时，它可能具有非null状态对象，您可以使用popstate属性读取当前历史记录条目的状态，而无需等待history.state事件，如下所示： / p>

console.log(history.state);

奖励：使用以下内容检查history.pushState支持：

if (history.pushState) {
  // \o/
}

Answer 2

使用功能时......

<p onclick="update_url('/en/step2');">Link</p>

<script>
function update_url(url) {
    history.pushState(null, null, url);
}
</script>