vue3 transition 在布局组件中不起作用

问：

我想在我的 Vue3 SPA 中使用一些过渡。 我使用 Vuetify 和 vue-router。

我在两个地方''''''。 如果将转换放入 App.ejvue 中，它可以正常工作，但仅限于整个应用程序加载时。 但是，如果我尝试将过渡组件放在我的布局结构中，那么我在 App.vue 中使用的完全相同的过渡将没有任何作用。 会有什么问题？

// App.vue
<template>
  <router-view v-slot="{ Component }">
    <transition name="slide">
      <component :is="Component" />
    </transition>
  </router-view>
</template>

<style scoped>
.wrapper {
  width: 100%;
  min-height: 100vh;
}

.slide-enter-active,
.slide-leave-active {
  transition: all 0.75s ease-out;
}
// further css
</style>

但是，如果我尝试在我的布局中使用它，它什么也做不了。 问题出在哪里？

// DefaultLayout.vue
<template>
  <v-app>
    <top-bar />
    <default-view />
    <bottom-bar />
  </v-app>
</template>

<script setup>
// imports
</script>

// DefaultView.vue
<template>
  <v-main class="mt-3 ml-2 mr-2">
    
      <router-view v-slot="{ Component }">
        <transition name="slide">
          <component :is="Component" />
        </transition>
      </router-view>
  
  </v-main>
</template>


<style scoped>
.wrapper {
  width: 100%;
  min-height: 100vh;
}

.slide-enter-active,
.slide-leave-active {
  transition: all 0.75s ease-out;
}

// further css
</style>

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    component: () => import('@/layouts/default/DefaultLayout.vue'),
    children: [
      {
        path: '',
        name: 'home',
        component: () => import(/* webpackChunkName: "home" */ '@/views/HomeView.vue'),
        meta: { requiresAuth: false },
      },
    ],
// ... other routes defined here
]

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

export default router