【Vue/Uni-app】瀏覽器返回強制刷新頁面及Vue生命周期

應(yīng)用場景:跳轉(zhuǎn)第三方頁面進行操作并同步數(shù)據(jù)后,用戶點擊返回(前進/后退)至源系統(tǒng)頁面時數(shù)據(jù)沒刷新
原因剖析:
瀏覽器在返回【history.go(-1)】期間會優(yōu)先獲取緩存中的數(shù)據(jù)
vue-Router中對當(dāng)前頁面配置了Keep-alive(頁面緩存模式)
PS:uni-app中,默認在全局范圍內(nèi)開啟并使用了Keep-alive
解決方案:
1.Vue/iView中

 {
      path: '/page1',
      name: 'Page1',
      component: Page1,
      meta: {
        keepAlive: true // 是否啟用頁面緩存(注釋或者刪掉這行代碼)
      }
    }

2.uni-app中

 //新增如下代碼
 activated(){
      /** 執(zhí)行頁面數(shù)據(jù)刷新的方法 */
     reload();
 },

一些拓展:

  1. activated鉤子函數(shù):keep-alive模式下(vue對象存活【存在頁面緩存】時,只要進入頁面就會立即觸發(fā)activated函數(shù),用于多次訪問頁面時進行對頁面數(shù)據(jù)進行初始化等操作)
  2. created/onLoad鉤子函數(shù):同樣的,created/onLoad鉤子也可以用來初始化頁面和數(shù)據(jù)使用,但僅在首次創(chuàng)建或重啟時觸發(fā),在一個生命周期內(nèi),created/OnLoad僅會觸發(fā)一次!
  3. Vue的生命周期
beforeCreate(){
      console.log("創(chuàng)建前===>胚胎")
},
created(){
      console.log("創(chuàng)建完成===>出生")
},
beforeMount(){
      console.log("掛載前===>幼兒園")
},
activated(){
      console.log("激活===>課外班:知識升級")
},
deactivated(){
      console.log("停止===>逃課打架:自暴自棄(多用于離開頁面,比如切換頁簽(?))")
},
mounted(){
      console.log("掛載結(jié)束===>小學(xué):知識消化(多用于配合監(jiān)聽及跨頁面數(shù)據(jù)加載使用)")
},
beforeUpdate(){
      console.log("更新前===>初中:知識迭帶(多用于異步更新前對頁面數(shù)據(jù)的處理)")
},
updated(){
      console.log("更新完成===>高中:知識鞏固")
},
beforeDestroy(){
      console.log("銷毀前===>大學(xué):思維碰撞(多用于關(guān)閉頁面時對頁面數(shù)據(jù)的操作)")
},
destroyed(){
      console.log("銷毀完成===>畢業(yè):現(xiàn)實世界(銷毀頁面時的操作,比如數(shù)據(jù)緩存清空等)")
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容