Страницы

Исходный код

Nuxt Kit предоставляет утилиты для настройки страниц и маршрутизации — расширения дерева страниц, правил маршрутов и прослоек.

`extendPages`

В Nuxt маршруты строятся по файлам в каталоге pages. Чтобы добавить страницу вне этой схемы, убрать маршрут или изменить его параметры, используйте extendPages — колбэк получает массив страниц, который можно менять на месте.

Смотрите видео от Vue School о extendPages.

Использование

import { createResolver, defineNuxtModule, extendPages } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options) {
    const { resolve } = createResolver(import.meta.url)

    extendPages((pages) => {
      pages.unshift({
        name: 'prismic-preview',
        path: '/preview',
        file: resolve('runtime/preview.vue'),
      })
    })
  },
})

Тип

function extendPages (callback: (pages: NuxtPage[]) => void): void

Параметры

callback: получает массив страниц NuxtPage[]. Меняйте его на месте — добавляйте, удаляйте и правьте элементы. Отдельно созданный внутри колбэка массив в итоговую конфигурацию не подставляется.

Свойство	Тип	Обязательно	Описание
`name`	`string`	`false`	Имя маршрута: навигация и идентификация.
`path`	`string`	`false`	URL-путь. Если не задан, Nuxt выведёт его из расположения файла.
`file`	`string`	`false`	Путь к Vue-файлу компонента маршрута.
`meta`	`Record<string, any>`	`false`	Произвольные метаданные маршрута (лейаут, прослойки, ограничения навигации).
`alias`	`string[] \| string`	`false`	Один или несколько алиасов URL для маршрута.
`redirect`	`RouteLocationRaw`	`false`	Правило редиректа: именованные маршруты, объекты или строки путей.
`children`	`NuxtPage[]`	`false`	Дочерние маршруты (вложенные лейауты и представления).

`extendRouteRules`

Серверная часть строится на Nitro. В конфигурации задаются редиректы, прокси, кэш и заголовки для шаблонов путей: паттерн маршрута сопоставляется с набором правил.

Подробнее о правилах маршрутов Nitro — в документации Nitro.

Видео Vue School о правилах маршрутов и прослойках маршрутов.

Использование

import { createResolver, defineNuxtModule, extendPages, extendRouteRules } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options) {
    const { resolve } = createResolver(import.meta.url)

    extendPages((pages) => {
      pages.unshift({
        name: 'preview-new',
        path: '/preview-new',
        file: resolve('runtime/preview.vue'),
      })
    })

    extendRouteRules('/preview', {
      redirect: {
        to: '/preview-new',
        statusCode: 302,
      },
    })

    extendRouteRules('/preview-new', {
      cache: {
        maxAge: 60 * 60 * 24 * 7,
      },
    })
  },
})

Тип

function extendRouteRules (route: string, rule: NitroRouteConfig, options?: ExtendRouteRulesOptions): void

Параметры

route: шаблон пути для сопоставления.
rule: настройки Nitro для подошедших запросов.

Подробнее о правилах маршрутов — в разделе Гибридный рендеринг → правила маршрутов.

options: дополнительные параметры. При override: true существующее правило для этого шаблона заменяется целиком.

Имя	Тип	По умолчанию	Описание
`override`	`boolean`	`false`	Полностью заменить ранее заданное правило для шаблона

`addRouteMiddleware`

Регистрирует прослойки маршрутов (route middleware) глобально или для выбранных маршрутов.

Ту же регистрацию из кода приложения можно выполнить утилитой addRouteMiddleware (например, в плагине).

Подробнее о прослойках маршрутов — в документации.

Смотрите видео от Vue School о добавлении правил маршрутов и прослоек маршрутов.

Использование

import { addRouteMiddleware, createResolver, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup () {
    const { resolve } = createResolver(import.meta.url)

    addRouteMiddleware({
      name: 'auth',
      path: resolve('runtime/auth'),
      global: true,
    }, { prepend: true })
  },
})

function isAuthenticated (): boolean { return false }
// ---cut---
export default defineNuxtRouteMiddleware((to, from) => {
  // isAuthenticated() — пример проверки, аутентифицирован ли пользователь
  if (to.path !== '/login' && isAuthenticated() === false) {
    return navigateTo('/login')
  }
})

Тип

function addRouteMiddleware (input: NuxtMiddleware | NuxtMiddleware[], options?: AddRouteMiddlewareOptions): void

Параметры

input: объект прослойки маршрута (middleware) или массив объектов со свойствами:

Свойство	Тип	Обязательно	Описание
`name`	`string`	`true`	Имя прослойки.
`path`	`string`	`true`	Путь к файлу прослойки.
`global`	`boolean`	`false`	При `true` прослойка выполняется для всех маршрутов.

options: дополнительные опции:

Свойство	Тип	По умолчанию	Описание
`override`	`boolean`	`false`	При `true` заменяет уже зарегистрированную прослойку с тем же `name`.
`prepend`	`boolean`	`false`	При `true` вставляет прослойку перед ранее зарегистрированными.

Был ли материал полезен?

Сообщить об ошибке или Редактировать на GitHub

Контекст

Nuxt Kit предоставляет утилиты для доступа к контексту выполнения Nuxt из модулей и вспомогательного кода.

Лейаут

Nuxt Kit предоставляет утилиты для регистрации лейаутов из модулей.