最近遇到了在不刷新頁面的情況下修改瀏覽器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()會拋出異常。
下面以博客園官網為例具體說明：
打開博客園官網鏈接 https://www.cnblogs.com/ ，F12打開控制台並輸入 window.history，可以得到window.history的相關信息，如下圖所示，我們關注的主要是紅框標出的三個信息，其中length為瀏覽記錄隊列長度，由於這個頁面是新打開的，隊列中只有當前頁面鏈接相關信息，其值為1，state值將在下面介紹，pushState即history.pushState()，不多贅述。
接下來我們開始實現修改瀏覽器url鏈接，在控制台輸入
window.history.pushState({status: 0} ,'' ,'?data=1')
執行后頁面沒有刷新，觀察瀏覽器的鏈接變成了 https://www.cnblogs.com/?data=1，成功實現在不刷新頁面的情況下修改瀏覽器url鏈接。pushState()的參數url有多種用法，除了上述用法，還可以是 ‘https://www.cnblogs.com/?data=1’ 、‘data/1’、'/data/1' 、‘data=1’ 等等，大家可以自己嘗試，同時需要注意url不支持跨域。
再次獲取window.history信息，對比pushState方法執行前后window.history的變化可以發現，length變為2，這是因為方法創建了新的瀏覽記錄，並將新的鏈接插入到瀏覽記錄隊列中；state值為{status: 0}，與方法的參數stateObject相對應，實現了數據傳遞，新頁面中可以通過執行 window.history.state.status ，得到參數中status的值0，最后附上結果如圖所示：
