在平常开发中，有些组件只需要加载一次，后面的数据将不存在变化，亦或者是组件需要缓存状态，滚动条位置等，这个时候，keep-alive的用处就立刻凸显出来了。
1.App.vue中使用keep-alive，include表示需要缓存的页面，exclude表示不需要缓存的页面，你可以只设置其中一个即可，但两个同时设置的时候，切记exclude优先级高于include，例如a组件在exclude中和include中都存在，那么，a组件是不会被缓存的
<template>
<div id="app">
<keep-alive :include="whiteList" :exclude="blackList">
<router-view v-if="isRouterAlive" ></router-view>
</keep-alive>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return{
isRouterAlive:true,
whiteList:['styleLibrary','OrderList','SalesData'],
blackList:['Footer'],
personShow:false,
}
},
}
</script>
2.App.vue中配合router进行使用
<template>
<div id="app">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view> <!--缓存组件-->
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view> <!--非缓存组件-->
</div>
</template>
将需要缓存的组件的$route.meta中的keepAlive设置为true，反之为false
{
path:'/login',
name:'login',
component:resolve=>require(['@/pages/login'],resolve),
meta:{
keepAlive:true,
title:'登录',
savedPosition:true,
}
},
