相關(guān)基礎(chǔ)知識(shí)
vue組件的生命周期
vue生命周期
瀏覽器歷史記錄
popstate: 當(dāng)活動(dòng)歷史記錄條目更改時(shí)废膘，將觸發(fā)該事件。如果被激活的歷史記錄條目是通過對(duì)history.pushState（）的調(diào)用創(chuàng)建的，或者受到對(duì)history.replaceState（）的調(diào)用的影響别渔，popstate事件的state屬性包含歷史條目的狀態(tài)對(duì)象的副本巍虫。
history.pushState()：添加歷史記錄條目
history.replaceState()：修改歷史記錄條目
注意：
調(diào)用history.pushState()或history.replaceState()不會(huì)觸發(fā)popstate事件。只有在做出瀏覽器動(dòng)作時(shí)吆豹，才會(huì)觸發(fā)該事件鱼的，如用戶點(diǎn)擊瀏覽器的回退按鈕（或者在Javascript代碼中調(diào)用history.back()）。
pushState() 絕對(duì)不會(huì)觸發(fā) hashchange 事件痘煤，即使新的URL與舊的URL僅哈希不同也是如此凑阶。
流程
不能依賴vue的生命周期，需要配合監(jiān)聽瀏覽器的popstate衷快，和使用pushState完成
// 添加一條返回跳轉(zhuǎn)的歷史記錄
window.history.pushState(stateObj, title, url);
// 觸發(fā)返回的時(shí)候直接跳轉(zhuǎn)到希望跳轉(zhuǎn)的頁面
window.onpopstate = () => {
this.$router.push({ path: url, query: *** });
};
手速快連續(xù)點(diǎn)擊兩次返回宙橱，還是能保持不變需要配合生命周期來做了
// 在銷毀前根據(jù)query字段判斷
beforeDestroy() {
this.$router.push({ path: url, query: *** });
}
