【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>
相关推荐
xw513 小时前
npm几个实用命令
前端·npm
!win !13 小时前
npm几个实用命令
前端·npm
代码狂想家13 小时前
使用openEuler从零构建用户管理系统Web应用平台
前端
dorisrv15 小时前
优雅的React表单状态管理
前端
蓝瑟15 小时前
告别重复造轮子!业务组件多场景复用实战指南
前端·javascript·设计模式
老华带你飞15 小时前
旅游|基于Java旅游信息系统(源码+数据库+文档)
java·开发语言·数据库·vue.js·spring boot·旅游
dorisrv15 小时前
高性能的懒加载与无限滚动实现
前端
韭菜炒大葱15 小时前
别等了!用 Vue 3 让 AI 边想边说,字字蹦到你脸上
前端·vue.js·aigc
StarkCoder15 小时前
求求你,别在 Swift 协程开头写 guard let self = self 了!
前端
清妍_15 小时前
一文详解 Taro / 小程序 IntersectionObserver 参数
前端