一个常见的需求是，同模块的若干页面需要使用同一种布局，比如俱乐部相关的页面的顶部需要展示俱乐部的名称，其他页面顶部需要展示网站名称。
通常实现的方法是，将俱乐部的名称和网站名称定义成公共组件，在每个页面都书写置顶的布局，并引入响应的公共组件。
显然这是非常低效的，通过全局布局 vite-plugin-vue-layouts 可以帮你解决这个麻烦！
友情提示：
vite-plugin-vue-layouts 通常是配合 unplugin-vue-router 一起使用的！
使用流程
1. 安装 vite-plugin-vue-layouts
npm i -D vite-plugin-vue-layouts
2. vite 配置中导入
vite.config.ts
import Layouts from 'vite-plugin-vue-layouts'
plugins 中添加 Layouts
plugins: [ // VueRouter 必须在 vue() 之前 VueRouter({}), Layouts({ layoutsDirs: 'src/layouts', // 指定布局文件的目录路径 defaultLayout: 'default' // 指定默认布局文件的名称 }), vue(), vueJsx(), vueDevTools() ],
3. 添加类型声明
env.d.ts
/// <reference types="vite-plugin-vue-layouts/client" />
4. 改造路由配置
- 引入 setupLayouts
- 用 setupLayouts() 包裹原路由
src/router/index.ts 的最终效果如下：
import { createRouter, createWebHistory } from 'vue-router' import { routes } from 'vue-router/auto-routes' import { setupLayouts } from 'virtual:generated-layouts' const router = createRouter({ history: createWebHistory(), routes: setupLayouts([ ...routes, // 自定义配置路由 /test ，访问文件 src/views/test.vue { path: '/test', component: () => import('@/views/test.vue') } ]) }) export default router
5. 创建布局模板
新建文件 src/layouts/default.vue
<template> <div>网站标题</div> <router-view></router-view> </template>
新建文件 src/layouts/ECclub.vue
<template> <div>EC编程俱乐部</div> <router-view></router-view> </template>
6. 页面中指定布局模板
src/pages/about.vue
<template> <div>关于EC俱乐部</div> </template> <route lang="yaml"> meta: layout: ECclub </route>
- 在目标页面底部参考上方范例新增 route 标签
- layout 的值设定为目标布局模板名称即可！
因在配置中，指定了默认布局模板为 default，所以所有未指定布局模板的页面，都会使用 src/layouts/default.vue 中的布局。
最终效果如下：
- 路由
/
网站标题 首页
- 路由
/about
EC编程俱乐部 关于EC俱乐部
更多配置和用法见官网
https://www.npmjs.com/package/vite-plugin-vue-layouts
