【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>
相关推荐
五仁火烧2 小时前
Vue3 项目的默认端口行为
服务器·vue.js·nginx·容器·vue
凌览2 小时前
别再死磕 Nginx!http-proxy-middleware 低配置起飞
前端·后端
EndingCoder3 小时前
类的继承和多态
linux·运维·前端·javascript·ubuntu·typescript
用户47949283569153 小时前
React 终于出手了:彻底终结 useEffect 的"闭包陷阱"
前端·javascript·react.js
程序员猫哥3 小时前
前端开发,一句话生成网站
前端
Younglina4 小时前
一个纯前端的网站集合管理工具
前端·vue.js·chrome
木头程序员4 小时前
前端(包含HTML/JavaScript/DOM/BOM/jQuery)基础-暴力复习篇
开发语言·前端·javascript·ecmascript·es6·jquery·html5
卖火箭的小男孩4 小时前
# Flutter Provider 状态管理完全指南
前端
小雨青年4 小时前
鸿蒙 HarmonyOS 6|ArkUI(01):从框架认知到项目骨架
前端
Null1554 小时前
浏览器唤起本地桌面应用(基础版)
前端·浏览器