vue 踩坑Transition组件

47 阅读1分钟

问题描述

最近在项目中遇到一个Transition组件引发的问题,框架使用Transition+keep-alive+动态组件,如下所示: image.png 在最近新建的某几个页面进行路由跳转操作后再跳回时,页面中的元素就不见了,之后就是所有的页面都是空白页了。

问题解决

顺着框架捋逻辑,在上图文件中各种注释调试,只要Transition组件注释掉就不会有问题,然后就查了查vue的Transition组件的相关问题,最终找到了问题所在,如官方文档所示: image.png

然后就看到了页面文件如下代码(组件必须只能有一个根元素): image.png

因此官方文档一定要看仔细了!!!