Vue中的keep-alive

keep-alive是Vue提供给我们一个内置组件，他可以用来保存我们路由切换时组件的状态

 组件使用keep-alive以后会新增两个生命周期 actived()  deactived(),
 我们在切换路由的时候，想保存组件的状态，比如列表页面进入详情，我们想保存列表滚动的位置，我们就可以使用keep-alive保存列表页面的滚动位置。

 怎么使用keep-alive：

 1. 全局保存在App.vue中  <keep-alive>把<routerView/>包裹起来

 2. 路由定义方式 

         1、router.js中设置要缓存的页面

{
    path: '/child1',
    name: 'Child1',
    component: Child1,
    meta:{
        keepAlive:true,//保存keep-alive状态
    }
}

          2、用v-if来显示router-view是否在keep-alive中出现

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive> 
<router-view v-if="!$route.meta.keepAlive"></router-view>

3. 使用keep-alive的标签属性，  include()  exclude()

<keep-alive  inclue="list,detail"  ></keep-alive>
<!--include 包含标签名字被缓存 exclude 包含的标签不被缓存-->
<!--缓存名字组件中有个name属性进行定义即可-->