如何使用Vue的keep-alive 缓存组件与页面。

keep-alive原理：
将组件的name与路由的name值进行匹配，匹配上了，即对组件进行缓存。
缓存的页面，在切换时不会发数据请求。

include 和 exclude prop 允许组件有条件地缓存。
二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。
匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。

缓存使用的场景
比如:
1、tab切换时，想要缓存一个tab页的内容。
2、查询列表页面，想要缓存查询结果。
不建议：
对新增的页面进行缓存。因为新增页面可能多个，缓存会导致页面的数据一致，而不是重新打开一个新页面。

使用例子:

// 和 `<transition>` 一起使用,单个组件
<transition>
  <keep-alive :include="compNameArr" >
    <component :is="view"></component>
  </keep-alive>
</transition>

data(){
   compNameArr: ['HelloWorld', 'b'],  // 组件名的数组
}

// 使用路由时的写法
<transition name="move" mode="out-in">
  <keep-alive :include="compNameArr" >
    <router-view></router-view>
  </keep-alive>
</transition>

！！！ 注意确保组件与路由有name名
！！！ 注意确保组件与路由有name名
！！！ 注意确保组件与路由有name名

eg:

   HelloWorld.vue
    <script>
     export default{
         name:"HelloWorld",
     }
    </script>
    
    router/index.js
    {
        name:"HelloWorld",
        path:"/HelloWorld",
        component:()=>import('@/components/HelloWorld.vue'),
        
    }

参考vue官网：https://cn.vuejs.org/v2/api/#keep-alive

惟求热泪盈眶与成就感 ^_