vue3 + router-view + keepalive parentComponent.ctx.deactivate is not a function

The usage of keepAlive in vue3 is different from that in vue2.
The usage in vue3

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

If you use the following v-if switch, please configure the key value for the transition, and use transition-group together

Error reporting

<router-view v-slot="{
    
     Component }">
           <keep-alive>
             <component :is="Component"  v-if="Route.meta.keepAlive"/>
           </keep-alive>
           <component :is="Component"  v-if="!Route.meta.keepAlive"/>
       </router-view>  

Solution : Configure a unique key value

  <router-view v-slot="{
    
     Component }">
       <keep-alive>
         <component :is="Component" v-if="Route.meta.keepAlive" :key="Route.meta.keepAliveKey" />
       </keep-alive>
       <component :is="Component" v-if="!Route.meta.keepAlive"/>
   </router-view> 

Keepalive usage
https://v3.cn.vuejs.org/api/built-in-components.html#keep-alive