Маршрутизация

Одна из ключевых возможностей Nuxt — файловый роутер. Каждый Vue-файл в app/pages/ создаёт соответствующий URL (маршрут), по которому отображается содержимое файла. Nuxt использует динамические импорты и code-splitting, чтобы отдавать минимум JavaScript для запрошенного маршрута.

Страницы

Маршрутизация Nuxt построена на vue-router; маршруты генерируются из компонентов в директории app/pages/ по именам файлов.

Используются соглашения об именовании для динамических и вложенных маршрутов:

-| pages/
---| about.vue
---| index.vue
---| posts/
-----| [id].vue

{
  "routes": [
    {
      "path": "/about",
      "component": "pages/about.vue"
    },
    {
      "path": "/",
      "component": "pages/index.vue"
    },
    {
      "path": "/posts/:id",
      "component": "pages/posts/[id].vue"
    }
  ]
}

Навигация

Компонент <NuxtLink> связывает страницы между собой. Он рендерит тег <a> с href, равным маршруту страницы. После гидрации приложения переходы выполняются на JavaScript при изменении URL, без полной перезагрузки страницы и с возможностью анимаций.

Когда <NuxtLink> попадает в зону видимости на клиенте, Nuxt заранее подгружает компоненты и payload связанных страниц — навигация становится быстрее.

<template>
  <header>
    <nav>
      <ul>
        <li><NuxtLink to="/about">About</NuxtLink></li>
        <li><NuxtLink to="/posts/1">Post 1</NuxtLink></li>
        <li><NuxtLink to="/posts/2">Post 2</NuxtLink></li>
      </ul>
    </nav>
  </header>
</template>

Параметры маршрута

Композабл useRoute() даёт доступ к текущему маршруту в блоке <script setup> или в методе setup() компонента Vue.

<script setup lang="ts">
const 
route
 = 
useRoute
()

// При переходе на /posts/1 значение route.params.id будет 1
console
.
log
(
route
.
params
.
id
)
</script>

Middleware маршрутов

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

Есть три вида middleware маршрутов:

1. Анонимный (inline) — определяется прямо на странице.
2. Именованный — файлы в app/middleware/, подгружаются асинхронно при использовании на странице. (Имя нормализуется в kebab-case: someMiddleware → some-middleware.)
3. Глобальный — файлы в app/middleware/ с суффиксом .global, выполняются при каждом переходе.

Пример middleware auth для защиты страницы /dashboard:

export default 
defineNuxtRouteMiddleware
((
to
, 
from
) => {
  // isAuthenticated() — пример проверки аутентификации
  if (
isAuthenticated
() === false) {
    return 
navigateTo
('/login')
  }
})

<script setup lang="ts">
definePageMeta
({
  
middleware
: 'auth',
})
</script>

<template>
  <
h1
>Добро пожаловать в панель управления</
h1
>
</template>

Валидация маршрута

Валидация маршрута задаётся свойством validate в definePageMeta() на нужной странице.

validate получает route. Верните true/false, чтобы разрешить или запретить рендер этой страницы для маршрута. При false будет 404. Можно вернуть объект с status/statusText для кастомной ошибки.

Для сложной логики используйте анонимный middleware маршрута.

<script setup lang="ts">
definePageMeta
({
  
validate
 (
route
) {
    // Проверка: id состоит из цифр
    return typeof 
route
.params.id === 'string' && /^\d+$/.
test
(
route
.params.id)
  },
})
</script>