带有 router-view 的 Vue 过渡动画仅适用于第一次过渡

Question

我想在导航栏元素之间进行转换，因此我使用路由器链接。对于 /about 部分，过渡效果很好，但对于其他部分，它完全停止工作。如果我在 /something 上并返回到 /about，过渡也有效，但对于其他路线则不然。

我能做什么有什么建议吗？

应用程序.vue

<template>
  <div>
    <Navbar/>
    <div>
      <router-link to="/about"/>
      <router-link to="/experience"/>
      <router-link to="/education"/>
      <router-link to="/contact"/>
    </div>
    <Transition name="slide-fade" mode="out-in">
      <router-view/> 
    </Transition>
  </div>
</template>

<style>
  .slide-fade-enter-active {
    transition: all 0.3s ease-out;
  }
  .slide-fade-enter-from,
  .slide-fade-leave-to {
    transform: translateX(2em);
    opacity: 0;
  }
</style>

路由器.js

const routes = [
    {
        path:'/about',
        name: 'About',
        component: About
    },
    {
        path:'/experience',
        name: 'Experience',
        component: Experience
    },
    {
        path:'/education',
        name: 'Education',
        component: Education
    },
    {
        path:'/contact',
        name: 'Contact',
        component: Contact
    }
]

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes
})

export default router

Answer 1

解决了！必须为此更改我的路由器视图标签：

<router-view v-slot="{ Component, route }">
      <Transition name="fade" mode="out-in">
        <div :key="route.name">  
          <component :is="Component"></component>
        </div>
      </Transition>
    </router-view>

向原始解决方案致敬/sf/answers/4902971671/