【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>
相关推荐
Hi_kenyon1 分钟前
快速入门VUE与JS(二)--getter函数(取值器)与setter(存值器)
前端·javascript·vue.js
海云前端15 分钟前
前端面试加分技巧:文本省略 + Tooltip 优雅实现,附可直接复用代码(求职党必看)
前端
3秒一个大5 分钟前
模块化 CSS:解决样式污染的前端工程化方案
css·vue.js·react.js
在西安放羊的牛油果5 分钟前
浅谈 storeToRefs
前端·typescript·vuex
triumph_passion5 分钟前
Zustand 从入门到精通:我的工程实践笔记
前端·性能优化
pusheng20256 分钟前
双气联防技术在下一代储能系统安全预警中的应用
前端·安全
C_心欲无痕6 分钟前
ts - 交叉类型
前端·git·typescript
彭涛3617 分钟前
Blog-SSR 系统操作手册(v1.0.0)
前端
全栈前端老曹13 分钟前
【前端路由】React Router 权限路由控制 - 登录验证、私有路由封装、高阶组件实现路由守卫
前端·javascript·react.js·前端框架·react-router·前端路由·权限路由
zhuà!34 分钟前
uv-picker在页面初始化时,设置初始值无效
前端·javascript·uv