【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>
相关推荐
GISer_Jing12 分钟前
AI编程革命:Trae如何重塑前端开发
前端·前端框架·aigc·ai编程
计算机学姐16 分钟前
基于SpringBoot的送货上门系统【2026最新】
java·vue.js·spring boot·后端·mysql·spring·tomcat
豌豆学姐17 分钟前
Sora2 视频生成 API 如何对接?附可直接使用的开源前端项目
前端·人工智能·开源·aigc·php
cz追天之路25 分钟前
华为机考 ------ 计算某字符出现次数
前端·javascript·华为机考
毕设源码-朱学姐31 分钟前
【开题答辩全过程】以 基于Web酒店管理的设计与实现为例,包含答辩的问题和答案
前端
万粉变现经纪人44 分钟前
如何解决 pip install SSL 报错 ValueError: check_hostname requires server_hostname 问题
网络·python·网络协议·beautifulsoup·bug·ssl·pip
talenteddriver1 小时前
Java Web:http请求在springboot项目中的传递层级(自用笔记)
java·前端·spring boot·http
咘噜biu1 小时前
Java后端和前端的接口数据加密方案(椭圆曲线集成加密方案)
java·前端·安全·aes·密钥协商ecdh·椭圆曲线集成加密方案
CodeSheep1 小时前
百度又一知名产品,倒下了!
前端·后端·程序员
阿芯爱编程1 小时前
前端面试题linux操作
前端·面试