Vue中keep-alive使用详解，实现页面缓存

使用的场景

在使用Vue开发单页面应用时，我们通常会使用Vue-Router进行页面导航，Vue-Router在进行路由切换的时候，页面是会重新加载
比如：根据条件查询列表显示的数据中，进入到第二个页面查看详细信息，然后返回，这种情况下列表页面会重新加载，之前输入的条件也不见了，这样操作的话如果还想看之前的搜索条件数据还需要再输入一次，用户体验很不好，此时就许哟啊对列表页进行缓存。在Vue-Router中可以使用keep-alive进行路由页面缓存。

keep-alive基本组成

<keep-alive> 内置组件，将需要缓存的组件包裹起来
activated和deactivated是 <keep-alive> 包裹的组件时新增的两个生命周期函数
include和exclude是<keep-alive>中的两个属性实现有条件的进行缓存。include包含的组件会被进行缓存，exclude包含的组件不会被缓存。

使用

实现路由页面缓存有两种如下两种方式：

１．使用include和exclude控制组件是否缓存

首先在 home.vue 页面中添加<keep-alive>组件
要缓存的路由组件必须设置name属性，跟cashViews中的值对应；

// home.vue
<template>
 <div>
   ...
  <keep-alive :include='cashViews'>
    <router-view></router-view>
  </keep-alive>
 </div>
</template>  
<script>
  export