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

definePageMeta({
  layout: 'default'
})

类型

definePageMeta(meta: PageMeta) => void

interface PageMeta {
  validate?: (route: RouteLocationNormalized) => boolean | Promise<boolean> | Partial<NuxtError> | Promise<Partial<NuxtError>>
  redirect?: RouteRecordRedirectOption
  name?: string
  path?: string
  props?: RouteRecordRaw['props']
  alias?: string | string[]
  pageTransition?: boolean | TransitionProps
  layoutTransition?: boolean | TransitionProps
  viewTransition?: boolean | 'always'
  key?: false | string | ((route: RouteLocationNormalizedLoaded) => string)
  keepalive?: boolean | KeepAliveProps
  layout?: false | LayoutKey | Ref<LayoutKey> | ComputedRef<LayoutKey>
  middleware?: MiddlewareKey | NavigationGuard | Array<MiddlewareKey | NavigationGuard>
  scrollToTop?: boolean | ((to: RouteLocationNormalizedLoaded, from: RouteLocationNormalizedLoaded) => boolean)
  [key: string]: unknown
}

参数

meta

• 类型: PageMeta

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

  name

  • 类型: string

    您可以为此页面的路由定义一个名称。默认情况下，名称是根据 pages/ 目录 内的路径生成的。

  path

  • 类型: string

    如果您有比文件名更复杂的模式，可以定义一个 自定义正则表达式。

  props

  • 类型: RouteRecordRaw['props']

    允许将路由 params 作为属性传递给页面组件。

  alias

  • 类型: string | string[]

    记录的别名。允许定义额外的路径，这些路径将像记录的副本一样运行。允许使用路径简写，如 /users/:id 和 /u/:id。所有 alias 和 path 值必须共享相同的参数。

  keepalive

  • 类型: boolean | KeepAliveProps

    当您希望在路由更改时保留页面状态或使用 KeepAliveProps 进行细粒度控制时，设置为 true。

  key

  • 类型: false | string | ((route: RouteLocationNormalizedLoaded) => string)

    当您需要更好地控制 <NuxtPage> 组件何时重新渲染时，设置 key 值。

  layout

  • 类型: false | LayoutKey | Ref<LayoutKey> | ComputedRef<LayoutKey>

    为每个路由设置布局的静态或动态名称。如果需要禁用默认布局，可以将其设置为 false。

  layoutTransition

  • 类型: boolean | TransitionProps

    设置应用于当前布局的过渡名称。您也可以将此值设置为 false 以禁用布局过渡。

  middleware

  • 类型: MiddlewareKey | NavigationGuard | Array<MiddlewareKey | NavigationGuard>

    直接在 definePageMeta 中定义匿名或命名的中间件。了解更多关于 路由中间件 的信息。

  pageTransition

  • 类型: boolean | TransitionProps

    设置应用于当前页面的过渡名称。您也可以将此值设置为 false 以禁用页面过渡。

  viewTransition

  • 类型: boolean | 'always'

    实验性功能，仅在 您的 nuxt.config 文件中启用时可用
    启用/禁用当前页面的视图过渡。 如果设置为 true，Nuxt 将不会应用过渡，如果用户的浏览器匹配 prefers-reduced-motion: reduce（推荐）。如果设置为 always，Nuxt 将始终应用过渡。

  redirect

  • 类型: RouteRecordRedirectOption

    如果路由直接匹配，重定向到哪里。重定向发生在任何导航守卫之前，并使用新的目标位置触发新的导航。

  validate

  • 类型: (route: RouteLocationNormalized) => boolean | Promise<boolean> | Partial<NuxtError> | Promise<Partial<NuxtError>>

    验证给定路由是否可以有效地用此页面渲染。如果有效，则返回 true，否则返回 false。如果找不到其他匹配项，这将意味着 404。您还可以直接返回一个带有 statusCode/statusMessage 的对象以立即响应错误（不会检查其他匹配项）。

  scrollToTop

  • 类型: boolean | (to: RouteLocationNormalized, from: RouteLocationNormalized) => boolean

    告诉 Nuxt 在渲染页面之前是否滚动到顶部。如果您想覆盖 Nuxt 的默认滚动行为，可以在 ~/app/router.options.ts 中进行（参见 自定义路由 了解更多信息）。

  [key: string]

  • 类型: any

    除了上述属性，您还可以设置 自定义 元数据。您可能希望通过 扩充 meta 对象的类型 以类型安全的方式进行。

示例

基本用法

下面的示例演示了：

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

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

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

  pageType: 'Checkout'
})

定义中间件

下面的示例展示了如何在 definePageMeta 中直接使用 function 定义中间件，或设置为与 middleware/ 目录中的中间件文件名匹配的 string：

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

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

      if (to.path !== '/checkout') {
        return navigateTo('/checkout')
      }
    }
  ],

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

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

使用自定义正则表达式

自定义正则表达式是解决重叠路由之间冲突的好方法，例如：

两个路由 "/test-category" 和 "/1234-post" 都匹配 [postId]-[postSlug].vue 和 [categorySlug].vue 页面路由。

为了确保我们仅在 [postId]-[postSlug] 路由中匹配数字 (\d+) 作为 postId，我们可以在 [postId]-[postSlug].vue 页面模板中添加以下内容：

definePageMeta({
  path: '/:postId(\\d+)-:postSlug' 
})

有关更多示例，请参见 Vue Router 的匹配语法。

定义布局

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

definePageMeta({
  // 设置自定义布局
  layout: 'admin'

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