【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>
相关推荐
人工智能训练16 小时前
【极速部署】Ubuntu24.04+CUDA13.0 玩转 VLLM 0.15.0:预编译 Wheel 包 GPU 版安装全攻略
运维·前端·人工智能·python·ai编程·cuda·vllm
会跑的葫芦怪17 小时前
若依Vue 项目多子路径配置
前端·javascript·vue.js
pas13619 小时前
40-mini-vue 实现三种联合类型
前端·javascript·vue.js
摇滚侠19 小时前
2 小时快速入门 ES6 基础视频教程
前端·ecmascript·es6
珑墨20 小时前
【Turbo】使用介绍
前端
军军君0121 小时前
Three.js基础功能学习十三:太阳系实例上
前端·javascript·vue.js·学习·3d·前端框架·three
打小就很皮...1 天前
Tesseract.js OCR 中文识别
前端·react.js·ocr
wuhen_n1 天前
JavaScript内存管理与执行上下文
前端·javascript
Hi_kenyon1 天前
理解vue中的ref
前端·javascript·vue.js
落霞的思绪1 天前
配置React和React-dom为CDN引入
前端·react.js·前端框架