vue中 keep-alive 組件的做用

原文地址

---

在vue項目中,不免會有列表頁面或者搜索結果列表頁面,點擊某個結果以後,返回回來時,若是不對結果頁面進行緩存,那麼返回列表頁面的時候會回到初始狀態,可是咱們想要的結果是返回時這個頁面仍是以前搜索的結果列表,這時候就須要用到vue的keep-alive技術了.

keep-alive 簡介

keep-alive 是 Vue 內置的一個組件，能夠使被包含的組件保留狀態，或避免從新渲染。
用法也很簡單：

<keep-alive>
  <component>
    <!-- 該組件將被緩存！ -->
  </component>
</keep-alive>

props

• include - 字符串或正則表達，只有匹配的組件會被緩存
• exclude - 字符串或正則表達式，任何匹配的組件都不會被緩存

 

// 組件 a
export default {
  name: 'a',
  data () {
    return {}
  }
}

 

<keep-alive include="a">
  <component>
    <!-- name 爲 a 的組件將被緩存！ -->
  </component>
</keep-alive>能夠保留它的狀態或避免從新渲染

<keep-alive exclude="a">
  <component>
    <!-- 除了 name 爲 a 的組件都將被緩存！ -->
  </component>
</keep-alive>能夠保留它的狀態或避免從新渲染

但實際項目中,須要配合vue-router共同使用.

router-view 也是一個組件，若是直接被包在 keep-alive 裏面，全部路徑匹配到的視圖組件都會被緩存：

<keep-alive>
    <router-view>
        <!-- 全部路徑匹配到的視圖組件都會被緩存！ -->
    </router-view>
</keep-alive>

若是隻想 router-view 裏面某個組件被緩存，怎麼辦？

增長 router.meta 屬性

 

// routes 配置
export default [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: {
      keepAlive: true // 須要被緩存
    }
  }, {
    path: '/:id',
    name: 'edit',
    component: Edit,
    meta: {
      keepAlive: false // 不須要被緩存
    }
  }
]

 

 

<keep-alive>
    <router-view v-if="$route.meta.keepAlive">
        <!-- 這裏是會被緩存的視圖組件，好比 Home！ -->
    </router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive">
    <!-- 這裏是不被緩存的視圖組件，好比 Edit！ -->
</router-view>

---

返回目錄