【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>
相关推荐
拉不动的猪3 分钟前
requestAnimationFrame 与 JS 事件循环:宏任务执行顺序分析
前端·javascript·面试
步步为营DotNet3 分钟前
深度解析C# 11的Required成员:编译期验证保障数据完整性
java·前端·c#
han_3 分钟前
开发提效利器 - 用好Snippets
前端·javascript·visual studio code
J船长23 分钟前
Firebase CLI 一直关联失败
前端
wuli_滔滔32 分钟前
DevUI云控制台实战:多云管理平台前端架构解密
前端·架构·devui·matechat
深耕AI1 小时前
【wordpress系列教程】02 Blocksy主题
运维·服务器·前端
我笔记2 小时前
vue 子父调用
前端·javascript·vue.js
毕设源码-朱学姐3 小时前
【开题答辩全过程】以 基于vue.js的校园二手平台为例,包含答辩的问题和答案
前端·javascript·vue.js
m0_471199633 小时前
【JavaScript】Set 和 Map 核心区别与实战用法(ES6 集合全解析)
前端·javascript·es6
执笔诉情殇〆3 小时前
使用AES加密方法,对Springboot+Vue项目进行前后端数据加密
vue.js·spring boot·后端