關於transition中嵌套keep-alive的問題解決

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