Vue3布局组件内Transition不生效问题排查

1. App.vue中过渡仅首次加载生效的原因 #

App.vue里的<router-view>渲染的是DefaultLayout组件，而你的路由结构中所有子路由都嵌套在DefaultLayout之下。切换子路由时，DefaultLayout本身不会被替换（它始终是父路由的组件），因此App.vue中的<transition>只会在首次加载DefaultLayout时触发一次，后续子路由切换时父路由的<router-view>没有更新，自然不会触发过渡效果。

2. DefaultView中过渡完全失效的原因 #

（1）Scoped样式的作用域限制 #

DefaultView的<style>标签带有scoped属性，这会让其中的.slide-enter-active等过渡样式仅作用于当前组件的元素（带有当前组件的data-v-xxx属性）。但<component :is="Component">渲染的是子路由组件（比如HomeView），这些组件拥有自己的data-v属性，无法被DefaultView的scoped样式选中，导致过渡动画的CSS规则根本无法生效。

（2）缺少强制组件更新的Key #

Vue Router默认会复用相同组件实例（比如从同一路由组件切换到自身时），如果不给<component>添加唯一Key，可能导致组件没有被销毁重建，进而无法触发<transition>的进入/离开钩子。

针对DefaultView的修复步骤 #

步骤1：调整样式作用域 #

要么把过渡样式移到全局样式文件（比如App.vue的非scoped样式块、或单独的transition.css），要么使用Vue的深度选择器::v-deep让scoped样式作用到子组件：

// DefaultView.vue
<style scoped>
::v-deep .slide-enter-active,
::v-deep .slide-leave-active {
  transition: all 0.75s ease-out;
}
// 其他scoped样式保留
</style>

步骤2：给Component添加唯一Key #

给<component>绑定key="$route.fullPath"，确保每次路由切换时强制重建组件实例，触发过渡：

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

针对App.vue首次加载的补充说明 #

如果希望App.vue中的过渡也能在路由切换时生效，需要调整路由结构：让每个顶级路由对应不同的布局组件，而非所有路由嵌套在同一个DefaultLayout下。但通常更合理的做法是把过渡放在子路由的<router-view>（也就是DefaultView里），这样只在内容区域触发过渡，导航栏等布局元素保持稳定。

内容的提问来源于stack exchange，提问作者Wadkan