更改URL而不刷新页面

Question

我想更换一个没有页面刷新的网址.

我需要改变:

https://example.com/en/step1

至

https://example.com/en/step2

怎么做？

Answer 1

更新

基于操作浏览器历史记录,将空字符串作为pushState方法的第二个参数(也称为标题)传递应该可以安全地防止将来对方法进行更改,因此最pushState好像这样使用:

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

您可以在上述文章中阅读更多相关信息

原始答案

使用history.pushState这样:

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

更新回答Idan Dagan的评论

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

答:来自MDN

history.replaceState()的运行方式与history.pushState()完全相同,只是replaceState()修改当前的历史记录条目而不是创建新的条目

这意味着如果您使用replaceState,是的,网址将被更改,但用户无法使用浏览器的后退按钮返回到上一个.状态(因为replaceState没有添加新的历史记录),并不建议并提供不良的用户体验.

更新添加window.onpopstate

因此,当这个答案引起你的注意时,这里有关于操纵浏览器历史记录的其他信息,使用后pushState,你可以使用window.onpopstate如下方法检测后退/前进按钮导航:

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

由于第一个参数pushState是一个对象,如果你传递了一个object而不是null,你可以访问那个onpopstate非常方便的对象,这里是如何:

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

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

console.log(history.state);

Answer 2

当你使用一个功能......

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

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