環(huán)境：vue.js+vant
問題：首頁列表和分類頁的列表用的同一個頁面，頁面區(qū)分用的是本地緩存，希望在分類頁點擊返回的時候，執(zhí)行清除緩存，刷新頁面
解決原理：利用history和瀏覽器刷新popstate狀態(tài)去實現(xiàn)
每一次返回都會去歷史記錄回退 -1 所以就在進入頁面之前 往歷史記錄里面多記錄一次當(dāng)前頁面的鏈接。然后再回退的時候監(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、頁面銷毀時，取消監(jiān)聽。否則其他vue路由頁面也會被監(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)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/so12138/article/details/84250196