【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>
相关推荐
Lank_M15 小时前
抠图结果缩放后边缘发脏,该怪的不是插值
前端
jerrywus15 小时前
Skill、MCP、Workflow、Rules、Memory 有什么区别?拿几次真实开发任务讲清楚
前端·agent·claude
补码缩写15 小时前
canvas 与 sharp 缩放透明图:默认预乘,非预乘得拆通道
前端
静默回滚15 小时前
抠图 PNG 缩小再放大,边缘又糊又白是两件事
前端
用户119770794807315 小时前
GitHub 电商开源项目分享:用 sharp 批量出饰品主图,试了裁剪、细节图和色彩配置文件三个坑
前端·node.js
deli00715 小时前
地图定位为什么偏了 500 米?GPS 与火星坐标实测
前端
TK泰妞15 小时前
节日促销前,TikTok 商品视频应该提前准备什么?
前端·人工智能·节日
CCIE-Yasuo16 小时前
网络安全-学习web开发-列表、标签
前端·学习·web安全
小大宇16 小时前
Vue知识点-ElementPlus-06 单选+多选+下拉+日期选择
前端·vue.js·elementui
用户114818678948416 小时前
Nuxt 3 学习版 Demo:跟着做一遍,从跑起来到自己会改
前端