本文基于 Vue2.0

keep-alive 簡(jiǎn)介

keep-alive 是 Vue 內(nèi)置的一個(gè)組件，可以使被包含的組件保留狀態(tài)，或避免重新渲染。

用法也很簡(jiǎn)單：

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

props

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

<keep-alive include="a"> <component>  <!-- name 為 a 的組件將被緩存！ --> </component></keep-alive>可以保留它的狀態(tài)或避免重新渲染

<keep-alive exclude="a"> <component>  <!-- 除了 name 為 a 的組件都將被緩存！ --> </component></keep-alive>可以保留它的狀態(tài)或避免重新渲染

遇見 vue-router

router-view 也是一個(gè)組件，如果直接被包在 keep-alive 里面，所有路徑匹配到的視圖組件都會(huì)被緩存：

<keep-alive>  <router-view>    <!-- 所有路徑匹配到的視圖組件都會(huì)被緩存！ -->  </router-view></keep-alive>

然而產(chǎn)品汪總是要改需求，攔都攔不住...

問(wèn)題

如果只想 router-view 里面某個(gè)組件被緩存，怎么辦？

使用 include/exclude

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

<keep-alive include="a">  <router-view>    <!-- 只有路徑匹配到的視圖 a 組件會(huì)被緩存！ -->  </router-view></keep-alive>

exclude 例子類似。

缺點(diǎn)：需要知道組件的 name，項(xiàng)目復(fù)雜的時(shí)候不是很好的選擇

增加 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">    <!-- 這里是會(huì)被緩存的視圖組件，比如 Home！ -->  </router-view></keep-alive><router-view v-if="!$route.meta.keepAlive">  <!-- 這里是不被緩存的視圖組件，比如 Edit！ --></router-view>

優(yōu)點(diǎn)：不需要例舉出需要被緩存組件名稱

【加鹽】使用 router.meta 拓展

假設(shè)這里有 3 個(gè)路由： A、B、C。

需求：

實(shí)現(xiàn)方式