【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>
相关推荐
Slow菜鸟5 分钟前
Codex CLI 教程(五)| Skills 安装指南:面向 Java 全栈工程师打造个人 ECC(V1版)
大数据·前端·人工智能
Lee川12 分钟前
打字机是怎么炼成的:Chat 流式输出深度解析
前端·后端·面试
前端若水16 分钟前
过渡(transition)高级:贝塞尔曲线、硬件加速
前端·css·css3
Lee川18 分钟前
Token 无感刷新与 Logout:前端安全会话管理实战
前端·后端·react.js
不会敲代码120 分钟前
我写了一个 HTML 文件,把 JS 事件循环彻底搞懂了
前端·javascript·面试
写不来代码的草莓熊28 分钟前
SVG 图标插件误读 PNG 图片 + Vite 重启缓存失效重新生成 + 浏览器严格渲染
前端
燐妤34 分钟前
前端HTML编程3:初识CSS
前端·html5
UXbot36 分钟前
独立设计师UI设计工具推荐(2026):支持AI原型生成与代码导出的5款工具全面评价
前端·人工智能·低代码·ui·交互·产品经理·web app
anOnion1 小时前
构建无障碍组件之Table Pattern
前端·html·交互设计
mfxcyh1 小时前
如何把对象数据转化为数组
java·服务器·前端