replaceState是Vue中一個(gè)重要的API，它允許開(kāi)發(fā)者在不刷新頁(yè)面的情況下更改瀏覽器地址欄的URL。

具體來(lái)說(shuō)，replaceState方法可以在瀏覽器歷史記錄中添加或修改一條記錄，同時(shí)不會(huì)改變當(dāng)前頁(yè)面的狀態(tài)。相比之下，pushState方法則會(huì)新增一條歷史記錄并且使頁(yè)面跳轉(zhuǎn)到新的URL中。

window.history.replaceState(state, title, url)

replaceState接收三個(gè)參數(shù)：狀態(tài)對(duì)象state、標(biāo)題title（在大多數(shù)瀏覽器中這個(gè)參數(shù)目前是無(wú)效的）、URL字符串url。其中，狀態(tài)對(duì)象是可以將一些數(shù)據(jù)放置于其中，以供在瀏覽器前進(jìn)后退時(shí)使用。

replaceUrl() {
const stateObj = { id: "10001" };
window.history.replaceState(stateObj, "", "/detail/10001");
}

在Vue中，常用的場(chǎng)景是在使用模態(tài)框或彈窗組件時(shí)使用replaceState方法，以便于用戶(hù)在關(guān)閉彈窗后可以回到之前的頁(yè)面狀態(tài)。例如：

showModal() {
this.show = true;
const stateObj = { modal: "show" };
window.history.replaceState(stateObj, "", window.location.href + "#show-modal");
}
hideModal() {
this.show = false;
const stateObj = { modal: "hide" };
window.history.replaceState(stateObj, "", window.location.href.split("#")[0]);
}

上述示例中，showModal方法展示模態(tài)框后，在URL后面添加了一個(gè)#show-modal字符串，并將一個(gè)stateObj對(duì)象放置于瀏覽器歷史記錄中。當(dāng)用戶(hù)關(guān)閉彈窗時(shí)，hideModal方法會(huì)將模態(tài)框隱藏，并將狀態(tài)對(duì)象stateObj的值修改為“hide”，最后將URL中的#show-modal去除。