需求：在使用keep-alive的同时使用transition动画效果
最开始是这样写的，但是发现报错，而且动画效果失效
<transition name="container-right-transition" mode="out-in"> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> </transition>
这里的话可以换一种思路，让所有的组件都缓存，需要保持缓存状态的组件不变，不需要缓存的则给router-view一个唯一的key值（这里使用时间戳的形式）
<transition name="container-right-transition" mode="out-in"> <keep-alive :max="10"> <router-view v-if="$route.meta.keepAlive"></router-view> <router-view v-if="!$route.meta.keepAlive" :key="new Date().getTime()"></router-view> </keep-alive> </transition>
此外，这种方式的话最好给keep-alive一个max限定缓存的组件数
当然，也可以使用 include 或者 exclude
参考： https://blog.csdn.net/a13706935773/article/details/90082275
https://doc.vue-js.com/v2/api/#keep-alive
关于transition中嵌套keep-alive的问题解决
原文：https://www.cnblogs.com/yejunm3/p/13897189.html