keep-alive

vue-cli v3.0

include - 字符串或正則表達(dá)式。只有名稱匹配的組件會(huì)被緩存。
exclude - 字符串或正則表達(dá)式。任何名稱匹配的組件都不會(huì)被緩存。(在這里寫三目運(yùn)算,來判斷是否緩存組件)
max - 數(shù)字。最多可以緩存多少組件實(shí)例。
<keep-alive> 是用在其一個(gè)直屬的子組件被開關(guān)的情形。如果你在其中有 v-for 則不會(huì)工作。
如果有上述的多個(gè)條件性的子元素,<keep-alive> 要求同時(shí)只有一個(gè)子元素被渲染。
<keep-alive include="AboutIndex" max="1" :exclude="isKeepalive?'':'AboutIndex'">
      <router-view/>
</keep-alive>
//AboutIndex 是需要被緩存的組件 是組件name名
 data() {
    return {
        isKeepalive: false,//是否對(duì)該組件進(jìn)行緩存
    };
  },

我這邊是使用watch 來判斷的路由,根據(jù)個(gè)人情況來使用。你也可以使用組件路由判斷。

  watch: {
    //監(jiān)聽路由 判斷是否進(jìn)行keep-alive動(dòng)態(tài)緩存 
    $route: function(to, from) {
      if (to.name === "detail"||to.name === "about") {
        this.isKeepalive = true;
      }else{
        this.isKeepalive = false;
      }
    }
  },
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

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