Vue项目中如何自定义layout布局？

自定义布局组件

components/page-layout/index.vue

1. 使用动态组件，传入组件
2. 自定义布局组件中的布局配置从route规则的meta字段中获取
3. meta字段中的layout字段未定义则默认使用deault
4. src目录下新建layouts目录存放页面布局文件，layouts/default.vue是默认的布局文件

<template>
  <component :is="layout"><slot /></component>
</template>
<script setup lang="ts">
import { computedAsync } from "@vueuse/core";
import { useRoute } from "vue-router";

const layout = computedAsync(async () => {
  const route = useRoute();
  try {
    const { layout = "default" } = route.meta;
    // vite使用5版本 若是4版本 此次使用相对路径../../layouts/${layout}.vue
    const layoutComponent = await import(`@/layouts/${layout}.vue`);
    return layoutComponent.default;
  } catch (err) {
    console.warn(`fail load: @/layouts/${layout}.vue`, err);
    // vite使用5版本 若是4版本 此次使用相对路径../../layouts/${layout}.vue
    const defaultComponent = await import(`@/layouts/default.vue`);
    return defaultComponent.default;
  }
});
</script>

使用示例

1. 自定义一个404页面不需要使用通用的布局模板，定义404的页面规则为

export const PAGE_NOT_FOUND_ROUTE = {
  path: "/:path(.*)*",
  name: "PAGE_NOT_FOUND_NAME",
  component: () => import("@/views/system/404.vue"),
  meta: {
    title: "ErrorPage",
    layout: "empty", // 使用empty布局
  },
};

2. 在layouts目录下新建empty.vue

<template>
  <RouterView />
</template>