最近遇到了在不刷新頁面的情況下修改瀏覽器url鏈接的需求，考慮到可以通過history.pushState()解決。現在將我理解的一些內容分享一下，不對的地方歡迎大家指出。
在使用方法前首先需要了解它的兼容性，history.pushState()存在一定的兼容性問題，可以通過 https://caniuse.com/#search=pushState 查看支持的瀏覽器版本。
history.pushState(stateObject, title, url);
history.pushState()主要是在不刷新瀏覽器的情況下，創建新的瀏覽記錄並插入瀏覽記錄隊列中。
1、狀態對象（stateObject）—— stateObject是一個JavaScript對象，通過pushState方法可以將stateObject內容傳遞到新頁面中。
2、標題（title）—— 幾乎沒有瀏覽器支持該參數，但是傳一個空字符串會比較安全。
3、地址（url）—— 新的歷史記錄條目的地址（可選，不指定的話則為文檔當前URL）。
瀏覽器在調用pushState()方法后不會加載該地址；傳入的URL與當前URL應該是同源的，否則，pushState()會拋出異常。
window.history.replaceState({}, '', `?query=${this.query}`)
上面代碼就可以在不刷新網頁的情況下，更新url鏈接了。
然后抽空研究了下這兩個新方法，確實可以解決很多問題
一、使用pushState()方法 可以控制瀏覽器自帶的返回按鈕
有時候我們想讓用戶點擊瀏覽器返回按鈕時，不返回，或執行其他操作，這時，就用到history.pushState()方法。
history.pushState(data,title,url) ，每執行一次都會增加一條歷史記錄
data：要設置的history.state的值，可以是任意類型的值，可根據此值進行判斷執行想要的操作。
比如監聽瀏覽器的前進后退事件：
window.addEventListener("popstate", function() { // 取出 設置好的 history.state 值，做判斷
});
二、history.replaceState() 與pushState()功能類似，除了這點：
replaceState()是用來修改當前的歷史記錄(history實體)，而不是創建一個新的歷史記錄，所以，當執行完history.replaceState()后，點擊返回按鈕照樣會返回上一個頁面。 當需要更新一個state對象或者當前history實體時，可以用replaceState()來實現。
用法：當在a頁面使用replaceState()修改了歷史記錄后，跳轉到b頁面，后退到a頁面時，歷史記錄就是修改過的。