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

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

В Nuxt маршруты определяются структурой файлов в app/pages. Под капотом используется vue-router, поэтому можно добавлять кастомные маршруты разными способами.

Конфигурация роутера

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

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

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

export default {
  routes: _routes => [
    {
      name: 'home',
      path: '/',
      component: () => import('~/pages/home.vue'),
    },
  ],
} satisfies RouterConfig

Хук pages

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

Пример — не создавать маршруты для файлов .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, extendRouteRules.

Опции роутера

Помимо опций vue-router, в Nuxt есть дополнительные опции.

Файл router.options

Рекомендуемый способ — файл app/router.options.ts с типом RouterConfig. Добавлять другие файлы опций можно в хуке pages:routerOptions.

nuxt.config

В nuxt.config настраиваются только JSON-сериализуемые опции: linkActiveClass, linkExactActiveClass, end, sensitive, strict, hashMode, scrollBehaviorType.

Hash-режим (SPA)

В SPA можно включить hash-историю через опцию hashMode. В этом режиме URL не отправляется на сервер и SSR не поддерживается.

Поведение скролла для hash-ссылок

Опция scrollBehaviorType: 'smooth' задаёт плавную прокрутку к якорю при переходе по ссылке с hash.

Кастомная история (продвинутое)

Можно переопределить режим истории функцией от base URL. Если вернуть null или undefined, Nuxt использует значение по умолчанию.