【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>
相关推荐
23级二本计科5 分钟前
前端 HTML + CSS + JavaScript
前端·css·html
踩着两条虫6 分钟前
VTJ.PRO「AI + 低代码」应用开发平台的后端模块系统
前端·人工智能·低代码
pany13 分钟前
程序员近十年新年愿望,都有哪些变化?
前端·后端·程序员
大鸡爪16 分钟前
基于PDF.js的安全PDF预览组件实现:从虚拟滚动到水印渲染
vue.js
朱昆鹏17 分钟前
IDEA Claude Code or Codex GUI 插件【开源自荐】
前端·后端·github
HashTang18 分钟前
买了专业屏只当普通屏用?解锁 BenQ RD280U 的“隐藏”开发者模式
前端·javascript·后端
双向3318 分钟前
Agent智能体:2026年AI开发者必须掌握的自主系统革命
前端
布列瑟农的星空18 分钟前
通用语法校验器tree-sitter——C++语法校验实践
前端
用户812748281512020 分钟前
libgui中的BufferQueueProducer加入堆栈CallStack编译报错问题-大厂企业实战项目难题
前端
myltx20 分钟前
node-sass 迁移 sass(dart-sass) 后样式报错?用 loader 先把构建救回来
vue.js·前端工程化