Vue3中使用vite-plugin-vue-layouts时页面过渡动画不生效

针对你遇到的页面过渡动画无效果的问题，可通过以下几个关键调整修复：

1. 修正过渡组件核心配置 #

你的布局页中，过渡组件缺少关键属性且key取值不够明确，这是过渡不生效的核心原因：

修改布局页的router-view部分：

<router-view v-slot="{ Component, route }">
  <!-- 添加name和mode属性，将key改为route.fullPath -->
  <transition name="page" mode="out-in">
    <div :key="route.fullPath">
      <component :is="Component" />
    </div>
  </transition>
</router-view>

同步更新对应的过渡样式（使用与name匹配的类名）：

.page-enter-active,
.page-leave-active {
  transition: opacity 0.5s ease;
}

.page-enter-from,
.page-leave-to {
  opacity: 0;
}

• mode="out-in"：确保旧页面完全离开后新页面才开始进入，避免过渡动画重叠导致视觉上无法感知
• route.fullPath：作为key能确保每次路由切换（包括参数变化）都会触发过渡，比直接使用route对象更可靠

2. 处理Suspense对过渡的影响 #

页面中的Suspense组件会延迟内容渲染，可能导致过渡动画的初始状态无法被正确捕获。你可以：

• 将Suspense移至页面组件内部（比如UsersTable组件中），让过渡元素直接感知组件的挂载/卸载
• 给过渡组件添加appear属性，强制初始渲染时触发动画：

<transition name="page" mode="out-in" appear>
  <!-- ... -->
</transition>

3. 确认vite-plugin-vue-layouts基础配置 #

确保你的Vite和路由配置正确集成了布局插件：

vite.config.js中的配置： #

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Layouts from 'vite-plugin-vue-layouts'

export default defineConfig({
  plugins: [
    vue(),
    Layouts({
      layoutsDirs: 'src/layouts', // 确保布局文件所在路径正确
      defaultLayout: 'admin-dashboard'
    })
  ]
})

路由配置文件（如router/index.js）： #

import { createRouter, createWebHistory } from 'vue-router'
import { setupLayouts } from 'virtual:generated-layouts'
import generatedRoutes from 'virtual:generated-pages'

const routes = setupLayouts(generatedRoutes)

const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router

完成以上调整后，页面切换时的过渡动画应该就能正常生效了。

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