definePageMeta

在页面内声明元信息(布局/样式/中间件等)

definePageMeta() 用于在页面文件内声明“页面元信息”。这些元信息会参与路由注册、页面样式、布局选择以及页面导航中间件配置等能力。

使用位置

  • 只能在路由中使用(例如 <srcDir>/pages/**/*.vue<srcDir>/<subPackageDir>/**/*.vue
  • 推荐放在页面的 <script setup> 顶层
definePageMeta() 只能作用于页面文件,不能在 App.vue、布局组件等非页面文件中使用。

签名

definePageMeta(meta: PageMeta): void

常用字段

下面是文档中最常用的字段。完整字段与类型以 @skiyee/oiyo/types 的定义为准。

属性类型默认值说明
type'page' | 'home'page页面类型。home 将会被当成首页。
layoutstring | falsedefault使用的布局名称;false 表示禁用布局。未设置时默认使用 default(前提是应用启用了布局占位符)。
stylePageStyle-页面样式配置,遵循 UniApp 的 pages.json 字段。
tabTabBar 单项配置-当前页面作为 TabBar 项时的配置;pagePath 会根据页面路径自动生成。
middlewarestring | string[]-页面进入前执行的具名中间件;数组按声明顺序执行。

middleware

页面通过 middleware 声明需要执行的具名中间件:

<script setup lang="ts">
definePageMeta({
  middleware: ['auth', 'admin-permission'],
})
</script>

中间件文件来自 src/middlewares

src/middlewares/auth.ts              -> auth
src/middlewares/admin/permission.ts -> admin-permission

.global 结尾的中间件会自动应用于所有页面,不需要在 middleware 中声明。

使用手册:了解页面中间件的完整用法
布局系统:渲染链路与布局名解析(概念视角)
使用手册:了解如何声明页面元信息