关于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

上一篇:css3 线性渐变和css3过渡一起用 过度时间不生效?换个方法做


下一篇:使用CSS3 Cubic-Bezier创建动画链接悬停效果