前端使用若依框架(vue3版本),在开发过程中有时会出现切换菜单或者tab,页面空白的情况,刷新页面后又恢复正常。出现这种情况一般是在页面停留了几分钟再操作或者短时间多次跳转,偶尔也会莫名奇妙的出现,
网上看到部分开发者也遇到过这个问题,应该是框架本身的bug,找寻之后发现在src\layout\components\AppMain.vue
这个文件中有这样一段话,transition加跳转动画,keep-alive用作缓存
但就因为同时使用了transition和keep-alive,并在组件内又使用了transition导致的(原理还不了解,可能是缓存了动画的原因,知道的大佬可以解答下)
解决方案:
1、在keep-alive外包裹上div(推荐)
<router-view v-else v-slot="{ Component, route }">
<transition
:duration="{ enter: 800, leave: 100 }"
mode="out-in"
name="el-fade-in-linear"
>
<div :key="route.path">
<keep-alive :include="cachedViews">
<component :is="Component" :key="route.path" />
</keep-alive>
</div>
</transition>
</router-view>
2、直接注释掉transition,但这样就没有菜单切换动画了
<router-view v-else v-slot="{ Component, route }">
<keep-alive :include="cachedViews">
<component :is="Component" :key="route.path" />
</keep-alive>
</router-view>
目前本人只了解到以上两种解决方案