Vue3 route cache component status and set transition animation

And vue2 Component state cache

  <div id="app">
    <keep-alive>

      <router-view />
    </keep-alive>
  </div>

atypism .

vue3 Using the above component caching method will not take effect .

vue3 The component cache mode is ：

  <router-view v-slot="{ Component }">
    <!-- <transition name="fade-transform"> -->
      <keep-alive>
        <component :is="Component" />
      <!-- </keep-alive> -->
    </transition>
  </router-view>

  Among them through transition You can set transition animation ：

 route.meta.transition Used to handle different routes using different animations

But we need to define the animation style   such as   route.meta.transition = aa      Then define the style   .aa-enter-active    .aa-enter-from  .aa-enter-to Wait for the pattern

route.meta.transition || 'fade'  Route is not defined meta  Attribute  transition  attribute   Then use fade Animation 
 All in all 6 Medium style 

enter-active  Route entry process    Include  enter-from  enter-to

eave-active  Route leaving process 、   Include  leave-from leave-to
 The above two define animation effects 
 The following definition   The state of beginning and ending 

enter-from  Begin to enter 

enter-to    Enter complete 

leave-from   Start to leave 

leave-to    Leave complete 

<template>
  <router-view v-slot="{ Component }">
    <transition name="fade-transform">  
      <!-- name="fade-transform" Name of the transition animation for the component  -->
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </transition>
  </router-view>
  <!-- <keep-alive>
    <router-view></router-view>
  </keep-alive> -->
</template>
<style>
.fade-transform-enter-active,
.fade-transform-leave-active {
  transition: opacity  5s ease 0s;
}

.fade-transform-enter-from,
.fade-transform-leave-to {
  opacity: 0;
}

.fade-transform-leave-from,
.fade-transform-enter-to {
  opacity: 1;
}
</style>

The effect of transition animation ：

  Reference link ：vue-router transition Simple switching effect - Rong Chao - Blog Garden