需求：在使用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