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

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

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

原因:

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

解决办法:

  1. 注释AppMain中的transition
    优点:解决了页面跳转空白的问题
    缺点:页面跳转没有过渡动画了
  2. 在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>
相关推荐
美酒没故事°4 小时前
npm源管理器:nrm
前端·npm·npm源
用户22152044278004 小时前
vue3组件间的通讯方式
前端·vue.js
xuyuan19984 小时前
修复1个Bug,引爆3个新Bug?回归测试的智慧
功能测试·测试用例·bug
三十_A4 小时前
【实录】使用 patch-package 修复第三方 npm 包中的 Bug
前端·npm·bug
BrightMZM5 小时前
记录一下Unity的BUG,Trial Version
unity·bug·打包·trial
下位子5 小时前
『AI 编程』用 Claude Code 从零到一开发全栈减脂追踪应用
前端·ai编程·claude
tyro曹仓舒5 小时前
Vue单文件组件到底需不需要写name
前端·vue.js
用户47949283569155 小时前
面试官:讲讲2FA 双因素认证原理
前端·后端·安全
乐影5 小时前
TS 模板字符串类型:从基础到进阶的类型编程魔法
前端·typescript
龙在天5 小时前
CSS 属性值的计算与过程
前端