Question

definePageMeta 是一个编译器宏，您可以使用它为位于 pages/ 目录中的 page 组件设置元数据（除非 另行设置）。 通过这种方式，您可以为 Nuxt 应用程序的每个静态或动态路由设置自定义元数据。

pages/some-page.vue

<script setup>
  definePageMeta({
    layout: 'default'
  })
</script>

相关阅读：dirs > pages > #page-metadata

Type

ts

definePageMeta(meta: PageMeta) => void

interface PageMeta {
  validate?: (route: RouteLocationNormalized) => boolean | Promise<boolean> | Partial<NuxtError> | Promise<Partial<NuxtError>>
  redirect?: RouteRecordRedirectOption
  alias?: string | string[]
  pageTransition?: boolean | TransitionProps
  layoutTransition?: boolean | TransitionProps
  key?: false | string | ((route: RouteLocationNormalizedLoaded) => string)
  keepalive?: boolean | KeepAliveProps
  layout?: false | LayoutKey | Ref<LayoutKey> | ComputedRef<LayoutKey>
  middleware?: MiddlewareKey | NavigationGuard | Array<MiddlewareKey | NavigationGuard>
  [key: string]: any
}

参数

meta - Type: PageMeta

基本用法

下面的示例演示：\

• key 如何成为返回值的函数；
• keepalive 属性如何确保在多个组件之间切换时不缓存 <modal> 组件；
• 添加pageType作为自定义属性：

pages/some-page.vue

<script setup>
  definePageMeta({
    key: (route) => route.fullPath,

    keepalive: {
      exclude: ['modal']
    },

    pageType: 'Checkout'
  })
</script>

定义中间件

下面的示例显示了如何使用definePageMeta中的function直接定义中间件，或将其设置为与位于middleware/目录中的中间件文件名相匹配的“字符串”：

pages/some-page.vue

<script setup>
  definePageMeta({
    // 将中间件定义为函数
    middleware: [
      function (to, from) {
        const auth = useState('auth')

        if (!auth.value.authenticated) {
            return navigateTo('/login')
        }

        return navigateTo('/checkout')
      }
    ],

    // ... 或一个字符串
    middleware: 'auth'

    // ... 或多个字符串
    middleware: ['auth', 'another-named-middleware']
})
</script>

定义布局

您可以定义与布局文件名相匹配的布局（默认情况下位于 layouts/ 目录中）。 您还可以通过将 layout 设置为 false 来禁用布局：

pages/some-page.vue

<script setup>
  definePageMeta({
    // 设置自定义布局
    layout: 'admin'

    // ...或禁用默认布局
    layout: false
  })
</script>