vite-plugin-vue-layouts 为文件系统路由提供布局系统支持，通过约定式目录将布局组件与页面组件解耦。页面可通过 <route> 块声明使用的布局，实现多布局切换而无需嵌套路由。
布局是包裹页面的外壳结构（Header、Sidebar、Footer），不同页面可能使用不同布局：
| 布局 | 适用页面 |
|---|---|
| default | 常规内容页 |
| auth | 登录/注册页（无导航栏） |
| admin | 后台管理页（侧边栏） |
| blank | 空白页（全屏展示） |
src/
├── layouts/
│ ├── default.vue # 默认布局
│ ├── auth.vue # 认证布局
│ └── admin.vue # 管理后台布局
└── pages/
├── index.vue # 使用 default 布局
├── login.vue # 使用 auth 布局
└── dashboard.vue # 使用 admin 布局pnpm add -D vite-plugin-vue-layouts// vite.config.ts
import Layouts from 'vite-plugin-vue-layouts'
export default defineConfig({
plugins: [
vue(),
Pages({ /* ... */ }),
Layouts({
layoutsDirs: 'src/layouts',
defaultLayout: 'default',
}),
],
})// main.ts
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import { setupLayouts } from 'virtual:generated-layouts'
import routes from '~pages'
const router = createRouter({
history: createWebHistory(),
routes: setupLayouts(routes), // 将布局注入路由
})
createApp(App).use(router).mount('#app')<!-- src/layouts/default.vue -->
<template>
<div class="layout-default">
<AppHeader />
<main class="container mx-auto p-4">
<router-view />
</main>
<AppFooter />
</div>
</template><!-- src/layouts/auth.vue -->
<template>
<div class="layout-auth min-h-screen flex items-center justify-center">
<router-view />
</div>
</template><route> 块<!-- src/pages/login.vue -->
<route lang="yaml">
meta:
layout: auth
</route>
<template>
<div class="login-form">
<!-- 登录表单 -->
</div>
</template>未指定 layout 的页面自动使用 defaultLayout 配置的布局（默认 default）。
<route lang="yaml">
meta:
layout: false
</route>Q: 布局切换时有过渡动画吗？
可以通过在布局组件中包裹 <Transition> 实现。也可在 App.vue 的 <router-view> 外使用 <Transition> 配合路由 meta 实现页面级过渡。
Q: 嵌套布局支持吗？
不直接支持。如需嵌套布局，建议在布局组件内部手动引入子布局组件，或使用嵌套路由替代。