<OiyoLayout>

布局渲染入口,用于包裹当前路由页面

<OiyoLayout> 是布局系统的渲染入口组件。它通常写在 src/App.vue 中,用于包裹 <OiyoPage />

使用位置

  • src/App.vue<template>
src/App.vue
<template>
  <OiyoLayout>
    <OiyoPage />
  </OiyoLayout>
</template>

Slots

default

默认插槽用于放置页面插槽(<OiyoPage />是其中之一)。

行为

  • 当页面选择了具名布局时,布局组件会包裹当前页面内容
  • 当页面未显式选择布局时,会回退到默认布局(通常为 src/layouts/default.vue
  • 当页面显式禁用布局时(例如 definePageMeta({ layout: false })),页面内容会跳过布局包裹

约束

  • 如果 App.vue 未启用 <OiyoLayout>,页面的 layout 选择不会参与渲染链路(表现为“不生效”)
  • 布局组件需要包含 <slot />,否则页面内容无法渲染
学习如何为多个页面套用相同的公共布局骨架
布局系统:机制与约束(概念视角)