definePageMeta

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

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

Type

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

接受以下页面元数据的对象：

• alias - Type string | string[]
  记录的别名。 允许定义行为类似于记录副本的额外路径。
  允许使用像 /users/:id 和 /u/:id 这样的简写路径。
  所有alias和path值必须共享相同的参数。
• keepalive - Type boolean | KeepAliveProps
  当您想在路由更改期间保留页面状态或使用 KeepAliveProps 进行细粒度控制时，请设置为 true .
• key - Type false | string | ((route: RouteLocationNormalizedLoaded) => string)
  当您需要更多地控制重新呈现 <NuxtPage> 组件时，设置 key 值。
• layout - Type false | LayoutKey | Ref<LayoutKey> | ComputedRef<LayoutKey>
  为每条路线设置布局的静态或动态名称。
  如果需要禁用默认布局，可以将其设置为false。
• layoutTransition - Type boolean | TransitionProps
  设置过渡的名称以应用于当前布局。
  您还可以将此值设置为false以禁用布局转换。
• middleware - Type MiddlewareKey | NavigationGuard | Array<MiddlewareKey | NavigationGuard>
  直接在 definePageMeta 中定义匿名或命名中间件。
  详细了解 路由中间件。
• pageTransition - Type boolean | TransitionProps
  设置过渡的名称以应用于当前页面。
  您还可以将此值设置为“false”以禁用页面转换。
• redirect - Type RouteRecordRedirectOption
  当用户访问某个路由时，如果该路由配置了 redirect 选项
  则会直接跳转到 redirect 指定的目标位置，而不是显示该路由所对应的组件。
• validate - Type (route: RouteLocationNormalized) => boolean | Promise<boolean> | Partial<NuxtError> | Promise<Partial<NuxtError>>
  验证给定路由是否可以使用此页面有效呈现。
  如果有效则返回 true，否则返回 false。
  如果找不到另一个匹配项，这将意味着 404。
  您也可以直接返回一个带有 statusCode/statusMessage 的对象以立即响应错误(不会检查其他匹配项)。
• key: string - Type any
  除了上述属性，您还可以设置 自定义 元数据。
  您可能希望通过增加 meta 对象的类型 以类型安全的方式这样做。

示例

基本用法

下面的示例演示：\

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

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

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

  pageType: 'Checkout'
})
</script>

定义中间件

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

<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 来禁用布局：

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

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