參考文檔:https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history

實(shí)現(xiàn)目標(biāo)

? ? ? 1.頁面的跳轉(zhuǎn)（前進(jìn)后退，點(diǎn)擊等）不重新請(qǐng)求頁面

? ? ? 2.頁面URL與頁面展現(xiàn)內(nèi)容一致（符合人們對(duì)傳統(tǒng)網(wǎng)頁的認(rèn)識(shí)）

? ? ? 3.在不支持的瀏覽器下降級(jí)成傳統(tǒng)網(wǎng)頁的方式

使用到的API

? ? ? history.state

? ? ? ? 當(dāng)前URL下對(duì)應(yīng)的狀態(tài)信息。如果當(dāng)前URL不是通過pushState或者replaceState產(chǎn)生的，那么history.state是null。

? ? ? history.pushState(state, title, url)

? ? ? ? 將當(dāng)前URL和history.state加入到history中，并用新的state和URL替換當(dāng)前。不會(huì)造成頁面刷新。

? ? ? ? state：與要跳轉(zhuǎn)到的URL對(duì)應(yīng)的狀態(tài)信息。

? ? ? ? title：標(biāo)題，可以為空。

? ? ? ? url：要跳轉(zhuǎn)到的URL地址，不能跨域。

? ? ? ? history.replaceState

? ? ? ? 用新的state和URL替換當(dāng)前。不會(huì)造成頁面刷新。

? ? ? ? state：與要跳轉(zhuǎn)到的URL對(duì)應(yīng)的狀態(tài)信息。

? ? ? ? ?title：不知道干啥用，傳空字符串就行了。

? ? ? ? ?url：要跳轉(zhuǎn)到的URL地址，不能跨域。

window.onpopstate

? ? ? ?history.go和history.back（包括用戶按瀏覽器歷史前進(jìn)后退按鈕）觸發(fā)，并且頁面無刷的時(shí)候（由于使用pushState修改了history）會(huì)觸發(fā)popstate事件，事件發(fā)生時(shí)瀏覽器會(huì)從history中取出URL和對(duì)應(yīng)的state對(duì)象替換當(dāng)前的URL和history.state。通過event.state也可以獲取history.state。