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

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

Страницы

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

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

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

Навигация

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

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

<template>
  <header>
    <nav>
      <ul>
        <li><NuxtLink to="/about">О нас</NuxtLink></li>
        <li><NuxtLink to="/posts/1">Пост 1</NuxtLink></li>
        <li><NuxtLink to="/posts/2">Пост 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. Анонимные (или встроенные) middleware маршрутов, которые определяются непосредственно в тех страницах, где они используются.
2. Именованные middleware маршрутов, которые размещаются в директории middleware/ и будут автоматически загружены при помощи асинхронного импорта при использовании на странице. (Примечание: Имя middleware маршрута нормализуется к kebab-case, так что someMiddleware превращается в some-middleware.)
3. Глобальные middleware маршрутов, которые размещаются в директории middleware/ (с суффиксом .global) и будут автоматически запускаться при каждом изменении маршрута.

Пример middleware auth, защищающего страницу /dashboard:

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

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

Nuxt предоставляет валидацию маршрутов с помощью свойства validate в definePageMeta() на каждой странице, которую вы хотите проверить.

Свойство validate принимает в качестве аргумента route. Вы можете вернуть логическое значение, чтобы определить, является ли это допустимым маршрутом для рендеринга на этой странице. Если вы вернете false и другое совпадение не будет найдено - это приведет к ошибке 404. Вы также можете непосредственно вернуть объект с statusCode/statusMessage чтобы немедленно ответить с ошибкой (другие совпадения не будут проверяться).

Если у вас есть более сложный случай использования, то вы можете использовать анонимные middleware маршрутов вместо этого.

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