<template>
    <div>
        <transition :name="transitionName" @afterLeave="afterLeave">
            <keep-alive>
                <router-view v-if="$route.meta.keepAlive"></router-view>
            </keep-alive>
        </transition>
        <transition :name="transitionName" @afterLeave="afterLeave">
            <router-view  v-if="!$route.meta.keepAlive" class="child-view"></router-view>
         </transition>
    </div>
</template>

 watch: {
    $route(to, from) {
     let toLevel = to.meta.level;
     let fromLevel = from.meta.level;
     this.transitionName = toLevel>fromLevel?"slide-left":"slide-right"
     this.has = toLevel>fromLevel?false:true //
    }
  }

for example, the above code only makes v-if judgment in router-view, so there will be two transition
if the v-if judgment component is added to the keepalive, the cache will not be cached
if the judgment page is added in the transition, it will not show where to judge or how to deal with the
?
Please help!