标签：缓存 transition alive keep https 组件

需求：在使用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,alive,keep,https,组件
来源： https://www.cnblogs.com/yejunm3/p/13897189.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。