Введение в посредники в Nuxt

В основном учебнике вы уже подключали макет через definePageMeta с полем layout. Так страница сообщает Nuxt, в каком каркасе её рисовать. Высший учебник добавляет к этому другой сценарий: что должно произойти до того, как пользователь увидит экран.

Представьте закрытый раздел или адрес, который допустим только при выполнении условия. Сайт может отказать в переходе, отправить на другой путь или проверить сегмент URL. В Nuxt такую работу выполняют посредники маршрута (route middleware): короткие функции, которые Nuxt вызывает при смене адреса, ещё до монтирования страницы.

Посредник живёт в отдельном файле папки app/middleware. Имя файла без расширения становится именем посредника. Страница указывает его в definePageMeta через поле middleware, по тому же принципу, что и layout, но с другой задачей: не выбор оболочки, а проверка или подготовка перехода.

Часть посредников можно повесить только на одну страницу, часть - на весь сайт. Можно читать параметры динамического сегмента из объекта маршрута, прерывать переход редиректом через функцию navigateTo или задать несколько имён в массиве, чтобы они шли строго по порядку. Отдельно от файлов посредников существует проверка validate в definePageMeta: она решает, допустим ли параметр страницы, и при ошибке показывает служебный экран Nuxt.

Раздел собран на JavaScript в структуре Nuxt 4 с папкой app/pages. Примеры можно проверить в проекте my-app после npm create nuxt@latest и запуска npm run dev. Каждый урок разбирает один приём и не требует файлов из соседней темы: вы можете повторять шаги в чистом проекте или постепенно наращивать один учебный каталог по мере прохождения раздела.

Vue Router как отдельная библиотека здесь не настраивается вручную: Nuxt сам связывает файлы страниц, посредники и навигацию. Достаточно положить код в нужные папки и объявить метаданные на странице. Базовая функция useRoute из первых глав здесь не повторяем: фокус на проверках до показа экрана.