【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>
相关推荐
馨谙4 分钟前
面试题----用户,组,su,su-,sudo,sudo-,nologin shell
java·前端·数据库
王同学 学出来20 分钟前
React案例实操(二)
前端·react.js·前端框架
weixin_4277716131 分钟前
Vite 与 Webpack 模块解析差异
前端·webpack·node.js
永远是我的最爱33 分钟前
基于ASP.NET的图书管理系统的设计与实现
前端·后端·sql·visual studio
l1t37 分钟前
duckdb数据库CROSS JOIN LATERAL 中使用 EXISTS子查询的一个bug
数据库·bug
广州华水科技41 分钟前
单北斗GNSS技术在变形监测中的应用及其位移监测优势解析
前端
刘晓倩1 小时前
Python内置函数-hasattr()
前端·javascript·python
C_心欲无痕1 小时前
不点击鼠标也能通过MouseEvent实现点击事件
前端·javascript
zhengxianyi5151 小时前
vite build 发布到nginx二级目录——将yudao-ui-go-view打包、部署到big目录下
vue.js·nginx·vite·前后端分离·打包·ruoyi-vue-pro优化·部署运维
鲨莎分不晴1 小时前
【实战】老项目焕发新生:从 Webpack 平滑迁移到 Vite 避坑全记录
前端·webpack·node.js