【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>
相关推荐
谭光志15 小时前
AI 是怎么操作浏览器的——browser use 实现原理
前端·javascript·ai编程
weixin_4713830315 小时前
args,...args与Parameters<T>
开发语言·前端
一tiao咸鱼15 小时前
前端转 agent # 03 - Pydantic v2 数据校验深入
前端·后端
Cobyte15 小时前
23.Vue Vapor 组件 attrs 的实现
前端·javascript·vue.js
前端H16 小时前
生成式 UI 实战:AI 如何重塑前端界面
前端·人工智能·ui
懂懂tty16 小时前
Web前端性能指标
前端
绝世唐门三哥17 小时前
vue3中页面返回时刷新首页的处理方案
开发语言·前端·javascript
东方小月17 小时前
agent-skills:把资深工程师的‘工作流’,装进你的AI编程里
前端·架构·代码规范
Maynor99617 小时前
AI Coding 零基础实战教程|第五部分:完整项目案例实操
java·前端·人工智能·claude code·ai coding
binbin_5217 小时前
React 井字棋教程:用一个小游戏理解组件和状态
前端·react.js·前端框架