在平常开发中，有些组件只需要加载一次，后面的数据将不存在变化，亦或者是组件需要缓存状态，滚动条位置等，这个时候，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, } },
作者：辉夜真是太可爱啦 链接：https://www.jianshu.com/p/606c4dd5b4ef 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
