keep-alive的应用场景

<!-- 一 -->
<keep-alive include="dynamicComponent1,dynamicComponent2"> 
	//表示缓存的组件是dynamicComponent1和dynamicComponent2
	<p :is="dynamicComponent1"></p> <!--这是一个动态的组件-->
</keep-alive>
<!-- 二 -->
<div id="app" class='wrapper'>
    <keep-alive>
        <!-- 需要缓存的视图组件 --> 
        <router-view v-if="$route.meta.keepAlive"></router-view>
     </keep-alive>
      <!-- 不需要缓存的视图组件 -->
     <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
<!-- 三 -->
<!-- 在路由中设置keep-alive -->
{
  path: 'list',
  name: 'itemList', // 商品管理
  component (resolve) {
    require(['@/pages/item/list'], resolve)
 },
 meta: {
  keepAlive: true,
  title: '商品管理'
 }
}