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

2023-11-19

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue3 + router-view + keepalive parentComponent.ctx.deactivate is not a function 的相关文章

  • [491]pywin32模拟鼠标键盘操作

    keybd event bVk bScan dwFlags dwExtraInfo 第一个参数 虚拟键码 键盘键码对照表见附录 第二个参数 硬件扫描码 一般设置为0即可 第三个参数 函数操作的一个标志位 如果值为KEYEVENTF EXTE
  • Unable to cast COM object of type Microsoft.Office.Interop.Excel.ApplicationClass' ...

    问题描述 这个问题产生的原因 与 office 的安装有关 参考 How to solve Unable to cast COM object of type Microsoft Office Interop Excel Applicati
  • arm鲲鹏服务器和x86区别

    华为云服务器x86计算和鲲鹏计算的区别是什么 X86和鲲鹏指的是两个系列的中央处理器架构 x86采用复杂指令集 CISC 鲲鹏采用精简指令集 RISC pc6a学习分享小白详细说明一下这2种服务器的差别 一 鲲鹏和X86处理器架构对比 1
  • R语言期末

    一 单项选择题 答题说明 每题均有 A B C D 四个备选答案 其中只有一个正确答案 将其 选出 并写在答题纸上 1 R 语言 软件 是被用于统计计算和绘图工作的一套语言和环境 是一套开源 的数据分析解决方案 最早 1995 年 是由 B
  • 代码走查(codereview)如何执行才能提升代码质量

    成功上岸 进入华为 之前花5W买的JAVA课程合集 整整420集 拿走不谢 公粮上交 手把手教学 学完即可就业 哔哩哔哩 bilibili 作为一名开发工程师 如何提升个人能力 减少bug的发生是一件非常重要的事情 它直接关系到了领导及项目

随机推荐