Nuxt mid-level certification launch date announced!

definePageMeta

Определите метаданные для компонентов вашей страницы.

definePageMeta - это макрос компилятора, который вы можете использовать для установки метаданных для ваших компонентов page, расположенных в директории pages/ (если не указано иное). Таким образом, вы можете настроить пользовательские метаданные для каждого статического или динамического маршрута вашего приложения Nuxt.

pages/some-page.vue
<script setup lang="ts">
definePageMeta({
  layout: 'default'
})
</script>
Узнать больше Docs > Guide > Directory Structure > Pages > #page Metadata.

Тип

definePageMeta(meta: PageMeta) => void

interface PageMeta {
  validate?: (route: RouteLocationNormalized) => boolean | Promise<boolean> | Partial<NuxtError> | Promise<Partial<NuxtError>>
  redirect?: RouteRecordRedirectOption
  name?: string
  path?: string
  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
    alias
    • тип: string | string[]
      Псевдонимы для записи. Позволяет определять дополнительные пути, которые будут вести себя как копия записи. Позволяет использовать сокращенные пути, такие как /users/:id и /u/:id. Все значения alias и path должны иметь одинаковые параметры.

    keepalive
    • тип: boolean | KeepAliveProps
      Установите значение true, если вы хотите сохранить состояние страницы при изменении маршрута, или используйте KeepAliveProps для более тонкого контроля.

    key
    • тип: false | string | ((route: RouteLocationNormalizedLoaded) => string)
      Установите значение key, если вам нужно больше контроля над тем, когда компонент <NuxtPage> будет перерисовываться.

    layout
    • тип: false | LayoutKey | Ref<LayoutKey> | ComputedRef<LayoutKey>
      Задайте статическое или динамическое имя лейаута для каждого маршрута. Это значение может быть установлено в false в случае, если макет по умолчанию должен быть отключен.

    layoutTransition
    • тип: boolean | TransitionProps
      Задайте имя перехода, который будет применяться для текущего лейаута. Вы также можете установить это значение в false, чтобы отключить transition лейаута.

    middleware
    • тип: MiddlewareKey | NavigationGuard | Array<MiddlewareKey | NavigationGuard>
      Определение анонимного или именованного middleware непосредственно в definePageMeta. Узнайте больше о middleware маршрутизации.

    pageTransition
    • тип: boolean | TransitionProps
      Установите имя перехода, которое будет применено для текущей страницы. Вы также можете установить это значение равным false, чтобы отключить переход страницы.

    viewTransition
    • тип: boolean | 'always'
      Экспериментальная функция, доступна только в том случае, если включена в вашем файле nuxt.config
      Включить/выключить View Transitions для текущей страницы. Если установлено значение 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 в качестве пользовательского свойства:
pages/some-page.vue
<script setup lang="ts">
definePageMeta({
  key: (route) => route.fullPath,

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

  pageType: 'Checkout'
})
</script>

Определение Middleware

В примере ниже показано, как можно определить middleware непосредственно в definePageMeta с помощью function или установив в виде string, которая соответствует имени файла middleware, расположенного в каталоге middleware/:

pages/some-page.vue
<script setup lang="ts">
definePageMeta({
  // определить middleware в виде функции
  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']
})
</script>

Использование пользовательского регулярного выражения

Пользовательское регулярное выражение является хорошим способом разрешения конфликтов между пересекающимися маршрутами, например:

Два маршрута "/test-category" и "/1234-post" соответствуют как маршрутам страниц [postId]-[postSlug].vue, так и [categorySlug].vue.

Чтобы убедиться, что мы соответствуем только цифрам (\d+) для postId в маршруте [postId]-[postSlug], мы можем добавить следующее в шаблон страницы [postId]-[postSlug].vue:

pages/[postId]-[postSlug].vue
<script setup lang="ts">
definePageMeta({
  path: '/:postId(\\d+)-:postSlug'
})
</script>

Для получения дополнительных примеров см. Синтаксис соответствия Vue Router.

Определение лейаута

Вы можете определить лейаут, который соответствует имени файла лейаута, расположенного (по умолчанию) в директории layouts/. Вы также можете отключить лейаут, установив для него значение false:

pages/some-page.vue
<script setup lang="ts">
definePageMeta({
  // Установить кастомный лейаут
  layout: 'admin'

  // ... или выключить лейаут по умолчанию
  layout: false
})
</script>