Страницы · Nuxt Kit

`extendPages`

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

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

Тип

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

type NuxtPage = {
  name?: string
  path: string
  file?: string
  meta?: Record<string, any>
  alias?: string[] | string
  redirect?: RouteLocationRaw
  children?: NuxtPage[]
}

Параметры

`callback`

Тип: (pages: NuxtPage[]) => void

Обязательный: true

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

Примеры

// https://github.com/nuxt-modules/prismic/blob/master/src/module.ts
import { createResolver, defineNuxtModule, extendPages } from '@nuxt/kit'

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

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

`extendRouteRules`

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

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

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

Тип

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

interface NitroRouteConfig {
  cache?: CacheOptions | false;
  headers?: Record<string, string>;
  redirect?: string | { to: string; statusCode?: HTTPStatusCode };
  prerender?: boolean;
  proxy?: string | ({ to: string } & ProxyOptions);
  isr?: number | boolean;
  cors?: boolean;
  swr?: boolean | number;
  static?: boolean | number;
}

interface ExtendRouteRulesOptions {
  override?: boolean
}

interface CacheOptions {
  swr?: boolean
  name?: string
  group?: string
  integrity?: any
  maxAge?: number
  staleMaxAge?: number
  base?: string
  headersOnly?: boolean
}

// See https://www.jsdocs.io/package/h3#ProxyOptions
interface ProxyOptions {
  headers?: RequestHeaders | HeadersInit;
  fetchOptions?: RequestInit & { duplex?: Duplex } & {
    ignoreResponseError?: boolean;
  };
  fetch?: typeof fetch;
  sendStream?: boolean;
  streamRequest?: boolean;
  cookieDomainRewrite?: string | Record<string, string>;
  cookiePathRewrite?: string | Record<string, string>;
  onResponse?: (event: H3Event, response: Response) => void;
}

Параметры

`route`

Тип: string

Обязательный: true

Шаблон маршрута для сопоставления.

`rule`

Тип: NitroRouteConfig

Обязательный: true

Конфигурация маршрута для применения к соответствующему маршруту.

`options`

Тип: ExtendRouteRulesOptions

По умолчанию: {}

Параметры для передачи в конфигурацию маршрута. Если override установлен в true, то он перезапишет существующую конфигурацию маршрута.

Примеры

// https://github.com/directus/website/blob/main/modules/redirects.ts
import { createResolver, defineNuxtModule, extendRouteRules, extendPages } from '@nuxt/kit'

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

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

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

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

`addRouteMiddleware`

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

Middleware маршрутов также могут быть определены в плагинах с помощью композабла addRouteMiddleware.

Узнайте больше о middleware маршрутов в документации.

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

Тип

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

type NuxtMiddleware = {
  name: string
  path: string
  global?: boolean
}

interface AddRouteMiddlewareOptions {
  override?: boolean
  prepend?: boolean
}

Параметры

`input`

Тип: NuxtMiddleware | NuxtMiddleware[]

Обязательный: true

Middleware-объект или массив middleware-объектов со следующими свойствами:

name (обязательный)
Тип: string
Имя middleware.
path (обязательный)
Тип: string
Путь к middleware.
global (опциональный)
Тип: boolean
Если включено, регистрирует middleware для использования во всех маршрутах.

`options`

Тип: AddRouteMiddlewareOptions

По умолчанию: {}

override (опциональный)
Тип: boolean
По умолчанию: false
override (optional)
Type: boolean
Default: false
If enabled, overrides the existing middleware with the same name.
prepend (optional)
Type: boolean
Default: false
Если включено, переопределяет существующую middleware с тем же именем.
prepend (опциональный)
Тип: boolean
По умолчанию: false
Если включено, добавляет middleware в начало списка существующих middleware.

Примеры

export default defineNuxtRouteMiddleware((to, from) => {
  // isAuthenticated() - это пример метода, проверяющего, авторизован ли пользователь.
  if (to.path !== '/login' && isAuthenticated() === false) {
    return navigateTo('/login')
  }
})

Контекст

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

Лейаут

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