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

vue3中keepAlive的用法与vue2中存在区别
vue3中的用法

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

如果使用下面的v-if切换,请给transition配置key值,且配合使用transition-group

报错写法

<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>  

解决方案:配置唯一的key值

  <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用法
https://v3.cn.vuejs.org/api/built-in-components.html#keep-alive

猜你喜欢

转载自blog.csdn.net/qq_34164814/article/details/123735827
今日推荐