window history pushState replaceState 跳轉原理

一、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