環(huán)境：vue.js+vant
問題：首頁列表和分類頁的列表用的同一個(gè)頁面灸促，頁面區(qū)分用的是本地緩存猴誊，希望在分類頁點(diǎn)擊返回的時(shí)候菇曲，執(zhí)行清除緩存沉馆，刷新頁面
解決原理：利用history和瀏覽器刷新popstate狀態(tài)去實(shí)現(xiàn)
每一次返回都會(huì)去歷史記錄回退 -1 所以就在進(jìn)入頁面之前 往歷史記錄里面多記錄一次當(dāng)前頁面的鏈接码党。然后再回退的時(shí)候監(jiān)聽刷新，去做一些事情斥黑。
具體執(zhí)行：
1揖盘、掛載完成后，判斷瀏覽器是否支持popstate
mounted(){
if (window.history && window.history.pushState) {
history.pushState(null, null, document.URL);
window.addEventListener('popstate', this.refreshFn, false);//false阻止默認(rèn)事件
}
},
2锌奴、頁面銷毀時(shí)兽狭，取消監(jiān)聽。否則其他vue路由頁面也會(huì)被監(jiān)聽
destroyed(){
window.removeEventListener('popstate', this.refreshFn, false);//false阻止默認(rèn)事件
},
3鹿蜀、將監(jiān)聽操作寫在methods里面箕慧，removeEventListener取消監(jiān)聽內(nèi)容必須跟開啟監(jiān)聽保持一致，所以函數(shù)拿到methods里面寫
methods:{
refreshFn(){
console.log("我刷新了一下頁面");
}
}
微信圖片_20211208152033.png
————————————————
版權(quán)聲明：本文為CSDN博主「so12138」的原創(chuàng)文章茴恰，遵循CC 4.0 BY-SA版權(quán)協(xié)議颠焦，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/so12138/article/details/84250196
