zoukankan      html  css  js  c++  java
  • 关于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

  • 相关阅读:
    SpringIOC的小例子
    java中递归实现复制多级文件夹
    快速排序和几种简单排序
    Oracle面试的基本题
    多态的两个小例子
    单例模式
    内部类与匿名内部类
    C#
    C#
    C#
  • 原文地址:https://www.cnblogs.com/yejunm3/p/13897189.html
Copyright © 2011-2022 走看看