Введение в клиентскую навигацию в Nuxt

В основном учебнике мы уже связывали страницы через NuxtLink, читали параметры маршрута через функцию useRoute и вызывали функцию navigateTo без дополнительных настроек. Этого хватает для типичного сайта: пользователь кликает по меню, адрес меняется, на экране другая страница из app/pages.

Первый заход на сайт всё равно начинается с HTML, который собрал сервер Nuxt. Браузер рисует разметку, подключает скрипты, и дальше переходы между своими страницами идут уже внутри одного приложения: вкладка не перезагружается целиком, как при обычной ссылке на чужой домен. Меняется только содержимое NuxtPage, а общий каркас из app/app.vue и layout может оставаться на месте.

Такой режим называют клиентской навигацией. Он экономит время и сохраняет уже загруженные ресурсы. Но иногда коду нужно точнее управлять тем, что видит пользователь и что лежит в истории браузера: показать текущий путь без домена, прочитать поля строки запроса после ?, вернуться на шаг назад, заменить запись в истории вместо новой или заново подтянуть данные с сервера без полной перезагрузки вкладки.

Эти приёмы не обязательны для простого лендинга или витрины из нескольких экранов. Ими пользуются, когда интерфейс реагирует на адрес: фильтры в query, подсказка «вы здесь», мастер из нескольких шагов с кнопкой «назад», обновление списка после действия на той же странице. Высший учебник в этом разделе собирает именно такие инструменты Nuxt 4 на JavaScript, опираясь на ту же структуру app/pages и автоимпорт, что и в предыдущих главах.

Мы не будем заново разбирать базовый NuxtLink или поле params у useRoute. Примеры раздела можно собрать в отдельном проекте my-app командой npm create nuxt@latest и проверить в npm run dev. Каждый урок опирается только на свои файлы в app/pages и не требует кода из соседних глав.