這篇文章主要介紹vue2.0中keep-alive怎么用，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

站在用戶的角度思考問題，與客戶深入溝通，找到懷安網(wǎng)站設(shè)計(jì)與懷安網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、申請(qǐng)域名、雅安服務(wù)器托管、企業(yè)郵箱。業(yè)務(wù)覆蓋懷安地區(qū)。

1.基本用法

vue2.0提供了一個(gè)keep-alive組件用來緩存組件,避免多次加載相應(yīng)的組件,減少性能消耗

有時(shí)候 可能需要緩存整個(gè)站點(diǎn)的所有頁面,而頁面一般一進(jìn)去都要觸發(fā)請(qǐng)求的
在使用keep-alive的情況下

將首次觸發(fā)請(qǐng)求寫在created鉤子函數(shù)中,就能實(shí)現(xiàn)緩存,
比如列表頁,去了詳情頁 回來,還是在原來的頁面

2.緩存部分頁面或者組件

(1)使用router. meta屬性

// 這是目前用的比較多的方式

  

router設(shè)置

... 
 routes: [
  { path: '/', redirect: '/index', component: Index, meta: { keepAlive: true }},
  {
   path: '/common',
   component: TestParent,
   children: [
    { path: '/test2', component: Test2, meta: { keepAlive: true } } 
   ]
  }
  ....
  // 表示index和test2都使用keep-alive

(2).使用新增屬性inlcude/exclude

2.1.0后提供了include/exclude兩個(gè)屬性 可以針對(duì)性緩存相應(yīng)的組件

 



 


//其中a,b是組件的name

注意:這種方法都是預(yù)先知道組件的名稱的

(3)動(dòng)態(tài)判斷

includedComponents動(dòng)態(tài)設(shè)置即可

以上是“vue2.0中keep-alive怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！