问题描述:

这是官方示例代码:
        <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>  
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐