Problems with using Transition and KeepAlive at the same time

[hooray]

Vue version

3.4.25

Link to minimal reproduction

https://github.com/hooray/issue-vue-transition-keepalive

Steps to reproduce

1. click button “Two”, page jump to /two
2. click button "One", page return to /

more detail:

My English proficiency may not be able to accurately describe this issue, so I have decided to use Chinese

我希望通过路由和 pinia 去动态控制 keep-alive 组件的include值，以实现页面组件的缓存。所以我在路由afterEach守卫里根据页面路由的配置，去添加或删除对应页面组件的name

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { createPinia } from 'pinia'
import useKeepAliveStore from './pinia/keepAlive'
import { createRouter, createWebHashHistory } from 'vue-router'

const pinia = createPinia()

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    { path: '/', name: 'one', component: () => import('./components/one.vue'), meta: { keepAlive: 'two' } },
    { path: '/two', name: 'two', component: () => import('./components/two.vue'), meta: { keepAlive: true, cancelKeepAlive: true } },
  ],
})
router.afterEach((to, from) => {
  const keepAliveStore = useKeepAliveStore()
  if(to.meta.keepAlive){
    const componentName = to.matched.at(-1)?.components?.default.name
    if (componentName) {
      keepAliveStore.add(componentName)
    }
  }
  if (from.meta.keepAlive) {
    const componentName = from.matched.at(-1)?.components?.default.name
    if (componentName) {
      if (from.meta.cancelKeepAlive) {
        keepAliveStore.remove(componentName)
      }
    }
  }
})

createApp(App).use(pinia).use(router).mount('#app')

但是当我在页面里输出 $route.name 的时候，会导致页面无法正常显示

<script setup>
defineOptions({
  name: 'Two'
})
</script>

<template>
  <div>
    <div>
      Route Name: {{ $route.name }}
    </div>
    Page Two
  </div>
</template>

11.mp4

当我注释掉这段代码后，则正常

<script setup>
defineOptions({
  name: 'Two'
})
</script>

<template>
  <div>
    <!-- <div>
      Route Name: {{ $route.name }}
    </div> -->
    Page Two
  </div>
</template>

222.mp4

我怀疑这个问题可能是 #10632 这个pr引起的，因为当我将vue降级到3.4.21后一切正常，而这个pr是在3.4.22发布的

额外说明：

/two 路由中的 meta: { keepAlive: true, cancelKeepAlive: true } 配置看上去像是多余的，这是因为我尽可能提供了最小的复现，在实际业务场景中，路由afterEach守卫中做了更复杂的逻辑处理，路由的meta配置也不会这么简单，所以这个配置不需要特别在意。

What is expected?

Components that display the / page normally.

What is actually happening?

The / page does not display components normally.

System Info

No response

Any additional comments?

Sorry @ you, but I think you might be able to fix it @edison1105

[edison1105]

@hooray
你好，我现在在修另一个 Transition 的 bug #11775 ，改动方案跟 #10632 有些类似。我不确定这个修复是否会导致你遇到的这个问题 #10827 再次出现。但你的仓库已经删掉了。能否再次提供一下复现的仓库吗？我本地测试一下，已避免给你的项目带来问题。