keep-alive缓存

设置缓存不生效的解决方案

• 1、因为keep-alive组件的include数组操作的对象是组件名、而不是路由名，因此我们定义每一个路由组件时，都要在组建中显式声明name属性，而不是在路由上声明name属性，否则缓存不起作用。而且，一个显式的name对Vue devtools有提示作用。
• 2、对于一些vue-element-admin之类的后台模板中，会存在多层嵌套的router-view，在外层的router-view设置keep-alive缓存不会对里层router-view中的页面生效，只有在里层router-view中设置keep-alive缓存才起作用，如果你设置了页面中的name属性，vue版本也大于2.1，且怎么设置缓存都不生效的话，不放看看自己页面布局嵌套的问题，一般都能解决。

以下是正文

在vue官方文档介绍中，<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。我们可以看到在2.1.0版本新增了include和exclude属性，2.5版本新增了max属性，属性的特征如下：
include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max- 数字。最多可以缓存多少组件实例。
当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

keep-alive是个抽象组件（或称为功能型组件），实际上不会被渲染在DOM树中。它的作用是在内存中缓存组件（不让组件销毁），等到下次再渲染的时候，还会保持其中的所有状态，并且会触发activated钩子函数。因为缓存的需要通常出现在页面切换时，所以常与router-view一起出现：

如此一来，每一个在router-view中渲染的组件，都会被缓存起来。

如果只想渲染某一些页面/组件，可以使用keep-alive组件的include/exclude属性。include属性表示要缓存的组件名（即组件定义时的name属性），接收的类型为string、RegExp或string数组；exclude属性有着相反的作用，匹配到的组件不会被缓存。假如可能出现在同一router-view的N个页面中，我只想缓存列表页和详情页，那么可以这样写：

<keep-alive :include="['ListView', 'DetailView']">
  <router-view />
</keep-alive>

新增了以上这些api，我们可以叫轻松的实现路由的缓存，假如有以下的使用场景：

• 现有页面：首页（A）、列表页（B）、详情页（C），一般可以从：A->B->C；
• B到C再返回B时，B要保持原有的状态；
• B返回A再进入B时，B不需要保持状态，是全新的。

很明显，这个例子中，B是“条件缓存”的，C->B时保持缓存，A->B时放弃缓存。其实解决方案也不难，只需要将B动态地从include数组中增加/删除就行了。具体步骤是：

1、在Vuex中定义一个全局的缓存数组，待传给include：

const keepAlive = {
  state: {
    keepAliveRoute: []
  },
  mutations: {
    keepAlive: (state, component) => {
      !state.keepAliveRoute.includes(component) &&
      state.keepAliveRoute.push(component)
    },
    noKeepAlive: (state, component) => {
      const index = state.keepAliveRoute.indexOf(component)
      if (index !== -1) {
        state.keepAliveRoute.splice(index, 1)
      }
    }
  }
}
export default keepAlive

2、在父页面中定义keep-alive，并传入全局的缓存数组：

<template>
  <div style="width:100%;height:100%">
    <keep-alive :include="keepAliveRoute">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      keepAliveRoute: state => state.keepAlive.keepAliveRoute
    })
  }
}
</script>

3、缓存：在路由配置页中，约定使用meta属性keepAlive，值为true表示组件需要缓存。在全局路由钩子beforeEach中对该属性进行处理，这样一来，每次进入该组件，都进行缓存：

const router = new Router({
  routes: [
    {
      path: '/A/B',
      name: 'B',
      component: B,
      meta: {
        title: 'B页面',
        keepAlive: true // 这里指定B组件的缓存性
      }
    }
  ]
})

4、在全局路由钩子beforeEach中添加以下代码：

router.beforeEach((to, from, next) => {
  // 在路由全局钩子beforeEach中，根据keepAlive属性，统一设置页面的缓存性
  // 作用是每次进入该组件，就将它缓存
   if (to.meta.keepAlive) {
    store.commit('keepAlive', to.name)
  }
})

5、取消缓存的时机：对缓存组件使用路由的组件层钩子beforeRouteLeave。因为B->A->B时不需要缓存B，所以可以认为：当B的下一个页面不是C时取消B的缓存，那么下次进入B组件时B就是全新的：

beforeRouteLeave (to, from, next) {
    if (to.name !== 'regFormDetail') {
      this.$store.commit('noKeepAlive', from.name)
    }
    next()
  }

因为B的条件缓存，是B自己的职责，所以最好把该业务逻辑写在B的内部，而不是A中，这样不至于让组件之间的跳转关系变得混乱。

详情页面：

beforeRouteLeave (to, from, next) {
    if (to.name !== 'regFormList' && to.name !== 'regFormSearch') {
      this.$store.commit('noKeepAlive', 'regFormSearch')
    }
    next()
  }