vue当中keep-alive写法

vue2中的keep-alive的写法

vue2和vue3都要在需要缓存 的路由下面写上自定义属性

 {
      path: '/home',
      name: 'home',
      component: () => import('../components/home/Home.vue'),
      meta: {
        keepAlive: true
      }
    },

vue2的keep-alive 的用法

<template>
  <div>
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

vue3的keep-alive 的用法

 <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" v-if="$route.meta.keepAlive"></component>
      </keep-alive>
      <!-- 这里component是vue中的特殊组件，:is是用来绑定指定组件 -->
      <component :is="Component" v-if="!$route.meta.keepAlive"></component>
  
 </router-view>