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

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

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

В Nuxt маршрутизация по умолчанию строится по файлам в каталоге pages/. Поскольку под капотом используется Vue Router, маршруты можно расширять и переопределять несколькими способами.

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

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

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

app/router.options.ts
import type { RouterConfig } from '@nuxt/schema'

export default {
  // https://router.vuejs.org/api/interfaces/routeroptions#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 даёт API для регистрации маршрутов:

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

Помимо настройки опций для 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/router-options'),
        optional: true,
      })
    },
  },
})

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

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

  • linkActiveClass
  • linkExactActiveClass
  • end
  • sensitive
  • strict
  • hashMode
  • scrollBehaviorType
nuxt.config
export default defineNuxtConfig({
  router: {
    options: {},
  },
})

Режим хэша (SPA)

В SPA можно включить хэш-историю опцией hashMode в конфиге router: перед путём добавляется #, полный URL на сервер не уходит, SSR недоступен.

nuxt.config.ts
export default defineNuxtConfig({
  ssr: false,
  router: {
    options: {
      hashMode: true,
    },
  },
})

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

Для хэш-ссылок можно задать плавный скролл: в опциях router укажите scrollBehaviorType: '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
  history: base => import.meta.client ? createMemoryHistory(base) : null, /* по умолчанию */
} satisfies RouterConfig