Problems with using Transition and KeepAlive at the same time #10827
Description
Vue version
3.4.25
Link to minimal reproduction
https://github.com/hooray/issue-vue-transition-keepalive
Steps to reproduce
- click button “Two”, page jump to
/two - 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