相關(guān)基礎(chǔ)知識(shí)

vue組件的生命周期

vue生命周期

瀏覽器歷史記錄

popstate: 當(dāng)活動(dòng)歷史記錄條目更改時(shí)，將觸發(fā)該事件。如果被激活的歷史記錄條目是通過(guò)對(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僅哈希不同也是如此。

流程

不能依賴(lài)vue的生命周期，需要配合監(jiān)聽(tīng)瀏覽器的popstate，和使用pushState完成

// 添加一條返回跳轉(zhuǎn)的歷史記錄
window.history.pushState(stateObj, title, url);
// 觸發(fā)返回的時(shí)候直接跳轉(zhuǎn)到希望跳轉(zhuǎn)的頁(yè)面
window.onpopstate = () => {
  this.$router.push({ path: url, query:  *** });
};

手速快連續(xù)點(diǎn)擊兩次返回，還是能保持不變需要配合生命周期來(lái)做了

// 在銷(xiāo)毀前根據(jù)query字段判斷
beforeDestroy() {
  this.$router.push({ path: url, query:  *** });
}