【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>
相关推荐
龙猫不热1 分钟前
THREE.js 关于Material基类下的depthTest 和 depthWrite的理解
前端·three.js
麦麦大数据7 分钟前
F054-基于Vue+Flask+Neo4j构建的移民知识图谱可视化分析系统
vue.js·flask·知识图谱·neo4j·移民分析
前端程序猿之路10 分钟前
简易版AI知识助手项目 - 构建个人文档智能问答系统
前端·人工智能·python·ai·语言模型·deepseek·rag agent
失败又激情的man10 分钟前
爬虫逆向之阿里系cookie acw_sc__v2 逆向分析
前端·javascript·爬虫
小肖爱笑不爱笑12 分钟前
Vue Ajax
前端·javascript·vue.js·web
全栈技术负责人21 分钟前
我的大前端世界观 (黄玄 - FEDAY 2023)
前端
changlianzhifu123 分钟前
分账系统:从“资金管道“到“增长引擎“,重塑商业价值分配新范式
java·服务器·前端
异界蜉蝣25 分钟前
前端模块化的演进史:从混乱到秩序
前端
宠..26 分钟前
QButtonGroup
java·服务器·开发语言·前端·数据库·c++·qt
写代码的【黑咖啡】30 分钟前
Python中的文件操作详解
java·前端·python