vue使用keep-alive緩存頁面,返回頁面時刷新部分?jǐn)?shù)據(jù)

?生命周期執(zhí)行順序:

1、不使用keep-alive的情況:beforeRouteEnter --> created --> mounted --> destroyed

2、使用keep-alive的情況:beforeRouteEnter --> created --> mounted --> activated --> deactivated

3、使用keep-alive,并且再次進(jìn)入了緩存頁面的情況:beforeRouteEnter -->activated --> deactivated



在keep-alive頁面里的activated 監(jiān)聽路由的參數(shù)變化可以實現(xiàn)全頁面刷新,

?"$route.query.type": function name(paidrams) {

? ? ? ?if (this.$route.path === "當(dāng)前的路徑") {

? ? ? ? ?console.log("上次id", this.policyId, "本次id", this.$route.query.id);

? ? ? ? ?if (this.policyId != this.$route.query.id||this.pageType!= this.$route.query.type) {

? ? ? ? ? ?console.log("路由參變化");?

? ? ? ? ? ? ?this.getDetail();

? ? ? ? ?}

? ? ? ?}

? ? ?},

? ?$route: {

? ? ? ?handler: function (val, oldVal) {

? ? ? ? ?if (val.path === "當(dāng)前的路徑") {

? ? ? ? ? ?console.log("監(jiān)聽路由變化", val, oldVal);?

? ? ? ? ?}

? ? ? ?}

? ? ?}

?著作權(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)容

  • 1.css只在當(dāng)前組件起作用答:在style標(biāo)簽中寫入scoped即可 例如: 2.v-if 和 v-show 區(qū)...
    小棋子js閱讀 620評論 0 0
  • 001、v-show與v-if的區(qū)別 v-show:操作的是元素的display屬性v-if:操作的是元素的創(chuàng)建和...
    汶沐閱讀 934評論 1 14
  • Vue Vue是一個前端js框架,由尤雨溪開發(fā),是個人項目 Vue近幾年來特別的受關(guān)注,三年前的時候angular...
    hcySam閱讀 341評論 0 0
  • 基礎(chǔ)部分 模版語法 1.computed和watch的區(qū)別 計算屬性computed :支持緩存,data數(shù)據(jù)不變...
    王蕾_fd49閱讀 695評論 0 0
  • 1.在keep-alive中直接添加 include,cachedViews(Array類型:包含vue文件的組件...
    曾經(jīng)也是個少年閱讀 5,904評論 0 1

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