vue3 + 若依（ruoyi）框架，点击切换左侧菜单，页面出现白屏，并且不报错。刷新页面后可以正常显示

背景

使用 vue3 + 若依框架，点击切换左侧菜单，页面偶尔白屏，并且不报错。刷新页面后可以正常显示。继续点击，还是偶尔会出现相同的问题。

网上查找资料，发现出现这种问题，有可能是页面组件嵌套，重复使用 transition 引起的。在 components 文件夹下的 layout 文件夹中，AppMain 中使用了 transition，而 keep-alive 包裹的组件中又使用了 transition，导致页面出现白屏。

解决办法

1. 在 AppMain 中去掉 transition，不过这样做会导致页面跳转没有过渡动画；
2. 在 keep-alive 外层包裹一个 div，并且设置属性 :key = "route.path"；【推荐】

提示

其实出现这种问题，是因为 vue3 允许组件模板中存在多个顶级元素（多根节点），但 transition 组件仍遵循必须包裹单个元素 / 组件的规则。这是因为过渡效果需要明确的目标元素来应用动画，若包裹多个根节点，vue 无法确定动画作用对象，会导致渲染异常。