How to use vue-router, transition and keep-alive together in vue?

my routing switch has the effect of sliding left and right, so that"s how I use it.

</router-view>
    </transition>

are two transition, one responsible for the animation of the keep-alive component and the other for the animation of the not-keep-alive. Each side is in charge of its own.

if there is a hidden danger, I will update it later.

Finally, please ask me how to change the question into the form of an article. no, no, no. For some reason, a post that asks a question becomes a post that answers a question.

in addition, I would like to ask you how to deal with this problem. ,


using transition-group can solve this problem
1. Your original way of writing
<transition-group :name="name">
      <keep-alive key="keep-alive">
        <router-view class="router-view" v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view class="router-view" v-if="!$route.meta.keepAlive" key="not-keep-alive"></router-view>
    </transition-group>
2. My revised way of writing

is to add an extra layer of div,v-if to div, and when switching routes, there will be the default transition effect of transition-group.

<transition-group :name="name">
    <div key="keep-alive"  v-if="$route.meta.keepAlive">
      <keep-alive key="keep-alive">
        <router-view class="router-view"></router-view>
      </keep-alive>
    </div>  
      <router-view class="router-view" v-if="!$route.meta.keepAlive" key="not-keep-alive"></router-view>
    </transition-group>

Hello, I have this problem, too, but when I use your last way, the animation will lose


both router-view need to add key?. Your key didn't add a colon?


just encounters this problem. Try


</router-view>
    </transition>
  </div>
</template>
watch: {
    // watch $router
    $route(to, from) {
      // tofrom,,
      if (to.meta.keepAlive) {
        this.transitionName = "slide-left";
      } else {
        if (to.meta.index > from.meta.index) {
          // 
          this.transitionName = "slide-left";
        } else {
          this.transitionName = "slide-right";
        }
      }
    },
  },

.cake-right-enter-active,
.questions-right-leave-active,
.stories-left-enter-active,
.questions-left-leave-active {
width: 100vw;
will-change: transform;
transition: all 500ms;
position: absolute;
}

right-enter {
opacity: 0;
transform: translate3d (- 100%, 0,0)
}
.cake-right-leave-active {
opacity: 0;
transform: translate3d (100%, 0,0);
}
.conversation-left-enter {
opacity: 0;
transform: translate3d (100%, 0,0);
}
.regions-left-leave-active {
opacity: 0;
transform: translate3d (- 100%, 0,0);
}

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-7adcc1-2467a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-7adcc1-2467a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?