vue中的keep-alive使用总结

在平常开发中，有些组件只需要加载一次，后面的数据将不存在变化，亦或者是组件需要缓存状态，滚动条位置等，这个时候，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,
      }
    },