带有路由器视图的 Vue 过渡动画仅适用于第一个过渡

Question

我想在我的导航栏元素之间进行转换，所以我使用了路由器链接。转换对于 /about 部分工作正常，但对于其他部分它完全停止工作。如果我在 /something 和 return 到 /about，转换也有效，但对于其他路线则无效。

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

App.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>

router.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 标签：

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

对原始解决方案大声疾呼

带有路由器视图的 Vue 过渡动画仅适用于第一个过渡

Vue transition animation with router-view only works for the first transition

vue.js

vue-router

transition