一个常见的需求是，同模块的若干页面需要使用同一种布局，比如俱乐部相关的页面的顶部需要展示俱乐部的名称，其他页面顶部需要展示网站名称。
通常实现的方法是，将俱乐部的名称和网站名称定义成公共组件，在每个页面都书写置顶的布局，并引入响应的公共组件。
显然这是非常低效的，通过全局布局 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
