【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>
相关推荐
Irene199114 小时前
Vue2 与 Vue3 自定义事件实现对比
vue.js
李剑一14 小时前
uni-app实现leaflet地图图标旋转
前端·trae
zhengxianyi51514 小时前
ruoyi-vue-pro优化——如何将一个模块快速变成一个独立的应用进行开发,部署,管理
vue.js·前后端分离·数据大屏·ruoyi-vue-pro优化
风度前端15 小时前
npm 2026安全新规下的免登录发包策略
前端
冴羽15 小时前
2026 年前端必须掌握的 4 个 CSS 新特性!
前端·javascript·css
rgeshfgreh15 小时前
Python流程控制:从条件到循环实战
前端·数据库·python
狗头大军之江苏分军15 小时前
告别旧生态:Ant Design 6 不再支持 IE 与现代前端趋势解读
前端·javascript·后端
C_心欲无痕15 小时前
nginx - 开启 gzip 压缩
运维·前端·nginx
闲云一鹤15 小时前
2026 最新 ComfyUI 教程 - 本地部署 AI 生图模型 - Z-Image-Turbo
前端·人工智能·ai编程
开开心心_Every16 小时前
安卓后台录像APP:息屏录存片段,行车用
java·服务器·前端·学习·eclipse·edge·powerpoint