VUE3使用keep-alive页面切换时报错：parentComponent.ctx.deactivate is not a function

qq_15197419

于 2022-02-18 16:14:09 发布

阅读量9.8k

点赞数 18

文章标签： vue

本文链接：https://blog.csdn.net/qq_15197419/article/details/123005480

版权

问题描述：

这是官方示例代码：

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

但是在tab页面切换时极大概率会报错：

在这里插入图片描述

解决方案：

将代码改为如下(在路由节点内配置name属性，且保证为唯一标识，或其它唯一标识也行)：

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