一、pushState
比如,当前打开的界面是:https://developer.mozilla.org/en-US/docs/Web/API/History,如下图所示:
在chrome的console下,执行代码:
history.pushState({},'','https://developer.mozilla.org/en-US/docs/Web/API/History_API')
则浏览器中会看到以下三种变化:
1、当前地址栏的url会变成:https://developer.mozilla.org/en-US/docs/Web/API/History_API,
2、且同时在浏览器的后退历史记录里新增一条url为:https://developer.mozilla.org/en-US/docs/Web/API/History的记录,如下图所示:
注意,历史记录的url不是:https://developer.mozilla.org/en-US/docs/Web/API/History_API,而是:https://developer.mozilla.org/en-US/docs/Web/API/History
3、当前界面未被刷新
二、replaceState
比如,当前打开的界面是:https://developer.mozilla.org/en-US/docs/Web/API/History_API,如下图所示:
在chrome的console下,执行代码:
history.replaceState({},'','https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API')
则浏览器中会看到以下三种变化:
1、当前地址栏的url会变成:https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API
2、当前界面未刷新,如下所示:
3、浏览器的历史记录里没有任何变化
综上所述:
pushState、replaceState都不会引起界面的刷新,即界面内容无任何变化;
都会改变地址栏的url;
pushState会在历史记录里新增一条记录,且该记录的url是执行pushState之前的url