Пользовательский роутинг

Добавление пользовательских маршрутов

В Nuxt 3 маршрутизация определяется структурой файлов в директории pages. Однако, поскольку Nuxt использует vue-router под капотом, он предлагает вам несколько способов добавить пользовательские маршруты в ваш проект.

Конфигурация маршрутизатора

Используя параметры маршрутизатора, вы можете дополнительно переопределить или расширить ваши маршруты с помощью функции, которая принимает отсканированные маршруты и возвращает настроенные маршруты.

Если она возвращает null или undefined, Nuxt вернется к маршрутам по умолчанию (полезно для изменения входного массива).

app/router.options.ts

import type { RouterConfig } from '@nuxt/schema'

export default {
  // https://router.vuejs.org/api/interfaces/routeroptions.html#routes
  routes: (_routes) => [
    {
      name: 'home',
      path: '/',
      component: () => import('~/pages/home.vue')
    }
  ],
} satisfies RouterConfig

Nuxt не будет дополнять новые маршруты, возвращаемые функцией routes, метаданными, определенными в definePageMeta предоставленного вами компонента. Если вы хотите этого, вам следует использовать хук pages:extend, который вызывается во время сборки.

Хук страниц

Вы можете добавлять, изменять или удалять страницы из отсканированных маршрутов с помощью Nuxt-хука pages:extend.

Например, чтобы предотвратить создание маршрутов для любых файлов .ts:

nuxt.config.ts

import type { NuxtPage } from '@nuxt/schema'

export default defineNuxtConfig({
  hooks: {
    'pages:extend' (pages) {
      // добавляем маршрут
      pages.push({
        name: 'profile',
        path: '/profile',
        file: '~/extra-pages/profile.vue'
      })

      // удаляем маршруты
      function removePagesMatching (pattern: RegExp, pages: NuxtPage[] = []) {
        const pagesToRemove: NuxtPage[] = []
        for (const page of pages) {
          if (page.file && pattern.test(page.file)) {
            pagesToRemove.push(page)
          } else {
            removePagesMatching(pattern, page.children)
          }
        }
        for (const page of pagesToRemove) {
          pages.splice(pages.indexOf(page), 1)
        }
      }
      removePagesMatching(/\.ts$/, pages)
    }
  }
})

Nuxt-модуль

Если вы планируете добавить целый набор страниц, связанных с определенной функциональностью, вам может понадобиться Nuxt-модуль.

Nuxt kit предоставляет несколько способов добавления маршрутов:

extendPages (callback: pages => void)
extendRouteRules (route: string, rule: NitroRouteConfig, options: ExtendRouteRulesOptions)

Опции маршрутизатора

Помимо настройки опций для vue-router, Nuxt предлагает дополнительные опции для настройки маршрутизатора.

Использование `app/router.options`

Это рекомендуемый способ задания опций маршрутизатора.

app/router.options.ts

import type { RouterConfig } from '@nuxt/schema'

export default {
} satisfies RouterConfig

Можно добавить больше файлов опций маршрутизатора, добавив файлы в хуке pages:routerOptions. Более поздние элементы массива переопределяют более ранние.

Добавление файла опций маршрутизатора в этом хуке включит постраничную навигацию, если только не задано значение optional, в этом случае она будет применяться только тогда, когда постраничная навигация уже включена.

nuxt.config.ts

import { createResolver } from '@nuxt/kit'

export default defineNuxtConfig({
  hooks: {
    'pages:routerOptions' ({ files }) {
      const resolver = createResolver(import.meta.url)
      // добавляем маршрут
      files.push({
        path: resolver.resolve('./runtime/app/router-options'),
        optional: true
      })
    }
  }
})

Использование `nuxt.config`

Примечание: Настраиваются только JSON-сериализуемые опции:

linkActiveClass
linkExactActiveClass
end
sensitive
strict
hashMode
scrollBehaviorType

nuxt.config

export default defineNuxtConfig({
  router: {
    options: {}
  }
})

Режим хэширования (SPA)

Вы можете включить хэш-историю в SPA-режиме с помощью hashMode конфига. В этом режиме маршрутизатор использует символ хэша (#) перед фактическим URL-адресом, который передается внутрь. Если этот режим включен, URL никогда не отправляется на сервер и SSR не поддерживается.

nuxt.config.ts

export default defineNuxtConfig({
  ssr: false,
  router: {
    options: {
      hashMode: true
    }
  }
})

Поведение скролла для хэш-ссылок

Вы можете опционально настроить поведение скролла для хэш-ссылок. Если установить для конфига значение smooth и загрузить страницу с хэш-ссылкой (например, https://example.com/blog/my-article#comments), вы увидите, что браузер плавно скроллится до этого якоря.

nuxt.config.ts

export default defineNuxtConfig({
  router: {
    options: {
      scrollBehaviorType: 'smooth'
    }
  }
})

Пользовательская история (продвинутый уровень)

Вы можете опционально переопределить history-режим с помощью функции, которая принимает базовый URL-адрес и возвращает history-режим. Если функция возвращает null или undefined, Nuxt вернется к истории по умолчанию.

app/router.options.ts

import type { RouterConfig } from '@nuxt/schema'
import { createMemoryHistory } from 'vue-router'

export default {
  // https://router.vuejs.org/api/interfaces/routeroptions.html
  history: base => import.meta.client ? createMemoryHistory(base) : null /* по умолчанию */
} satisfies RouterConfig

Канал ночных релизов

Канал ночных релизов позволяет использовать Nuxt, собранный непосредственно из последних коммитов в репозитории.

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

Узнайте, как интегрировать плагины Vite в ваш проект Nuxt.