【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>
相关推荐
写代码的皮筏艇6 小时前
CSS中常使用的函数
前端·css
Cache技术分享6 小时前
261. Java 集合 - Java 开发必备:ArrayList 与 LinkedList 的选择攻略
前端·后端
Neptune16 小时前
js防抖技术:从原理到实践,如何解决高频事件导致的性能难题
前端·javascript
是你的小橘呀6 小时前
从爬楼梯到算斐波那契,我终于弄懂了递归和动态规划这俩 "磨人精"
前端·javascript·面试
m0_740043736 小时前
Vuex中commit和dispatch的核心区别
前端·javascript·html
草字6 小时前
css 按钮的脉冲光环动画,强调动画。
前端·css
BD_Marathon6 小时前
【JavaWeb】CSS_三大选择器
前端·css
jump6806 小时前
柯里化
前端
NeoInfra6 小时前
全面解读ThinkPHP 5.0:现代PHP框架的架构演进与安全实践
前端
一 乐6 小时前
宠物店管理|基于Java+vue的宠物猫店管理管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端