vue3 过渡在布局组件内不起作用

Question

我想在我的 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

Answer 1

您应该只在

App.vue

或

DefaultView.vue

中应用一次过渡，因为将过渡应用于它们中的

router-view

元素并不理想。

App.vue

过渡覆盖应用程序中的所有路由，包括在

DefaultView.vue

组件内渲染的路由，但是当您在

DefaultView.vue

中再次应用过渡时，它不会产生任何效果，因为过渡已经应用在根级别。