正确使用keepAlive

第一种方式（推荐）

 <keep-alive :include="keepAliveList">
        <router-view :key="$route.path" />
</keep-alive>

注意：组件名称和include里的一致才会缓存
使用这种方式 include 可以是数组、正则表达式、一个组件的名称
不缓存这个组件的时候，将组件名称从keeAliveList里移除就可以了

第二种方式（不推荐）

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

需要在路由的meta信息里增加 keepAlive: true

{
    path: '/xxx/xxxxx',
    name: 'AddXXX',
    meta: {
       title: '新增XX',
       activeMenu: '/XXX',
       keepAlive: true
    },
    component: () => import('@/views/XXX.vue)
},

很多人都喜欢用第二种方式，因为vue2.0版本以上才有，所以这是一种很久之前的用法
为什么不推荐
因为v-if切换组件的时候会导致组件渲染问题，虽然可以缓存，但是切换页面可能会导致一些组件触发created、mounted里的方法，不信可以去自己试试
tips：项目需要缓存的页面少，并且数据请求时间短的可以使用这种方法，影响很小

嵌套组件的坑

嵌套组件的时候，最好App.vue里这样写

 <div id="app" ref="app">
    <router-view />
  </div>

main组件里这样写

<main>
    <keep-alive :include="keepAliveList">
     	<router-view :key="$route.path" />
    </keep-alive>
</main>

别问为什么，血的教训，因为公司框架是一些前辈写的，他们都行喜欢使用第二种写法来写，嵌套路由这样写，会导致内层组件是keepAlive的，但是外层不是，切换二级菜单就会触发内部已经缓存页面的created里的请求，不信你去试试，接手项目，遇到请求重复之类的问题，找不到解决方法，可以去看看router-view。

store里控制页面的缓存

当数据提交，或者是新增/编辑页面使用的同一个页面的时候，想要清除缓存怎么办

数组（讲数组吧，这个最好用）

直接在提交或者是关闭此页面的时候将这个组件的名称从keepAlive列表里移除，然后在进入这个页面的时候，初始化keepAliveList（重置为之前的列表），这样就又会缓存了。编辑页面就判断在离开页面的时候将这个页面的名称从keepAliveList移除