When <router-view> component is used together with <transition> and <keep-alive> components, it will cause the development environment route to jump to a blank page.

[hooray]

Version

4.1.6

Reproduction link

github.com

Steps to reproduce

When I use nested routes and use the <transition> and <keep-alive> components on the layouts page, I edit the script code on the menu1 page and then click to jump to the menu2 page, and the page goes blank.
This problem only occurs in the development environment and will return to normal after refreshing the page.

bandicam.2023-01-08.14-48-03-482.mp4

<!-- layouts/index.vue -->
<template>
  <div>
    <router-link to="/menu1">menu1</router-link> | <router-link to="/menu2">menu2</router-link>
    <router-view v-slot="{ Component, route }">
      <transition name="main" mode="out-in" appear>
        <keep-alive>
          <component :is="Component" :key="route.fullPath" />
        </keep-alive>
      </transition>
    </router-view>
  </div>
</template>

<style scoped>
.main-enter-active {
  transition: 0.2s;
}

.main-leave-active {
  transition: 0.15s;
}

.main-enter-from {
  opacity: 0;
  margin-left: -20px;
}

.main-leave-to {
  opacity: 0;
  margin-left: 20px;
}
</style>

If I delete either <transition> or <keep-alive> component, everything works fine.

What is expected?

After modifying the code and jumping to the page can be displayed normally

What is actually happening?

Cannot be displayed properly

[posva]

Duplicate of vuejs/core#7121