一个常见的需求是，同模块的若干页面需要使用同一种布局，比如俱乐部相关的页面的顶部需要展示俱乐部的名称，其他页面顶部需要展示网站名称。

通常实现的方法是，将俱乐部的名称和网站名称定义成公共组件，在每个页面都书写置顶的布局，并引入响应的公共组件。

显然这是非常低效的，通过全局布局 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. 创建布局模板

vue3 【提效】全局布局 vite-plugin-vue-layouts 实用教程_路由配置

新建文件 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