【vue3若依框架切换菜单，跳转到其他页面会导致所有页面出现空白的情况，刷新页面后又恢复正常（只限于当前页面正常）】

会发光的猪。2024-11-09 13:28

今天在用若依框架vue3版本开发的时候遇到个bug：

切换菜单，跳转到其他页面会导致所有页面出现空白的情况，刷新页面后又恢复正常（只限于当前页面正常）

原因：

这个组件使用transition加跳转动画，keep-alive用作缓存，可能是由于在AppMain中用了transition，组件内又使用了transition才导致了这个问题。

解决办法：

注释AppMain中的transition
优点：解决了页面跳转空白的问题
缺点：页面跳转没有过渡动画了
在keep-alive外包裹上div(推荐)

复制代码

 <transition name="fade-transform" mode="out-in">
        <div :key="route.path">
          <keep-alive :include="tagsViewStore.cachedViews">
            <component
              v-if="!route.meta.link"
              :is="Component"
              :key="route.path"
            />
          </keep-alive>
        </div>
      </transition>