Введение в навигацию в Nuxt

Когда на сайте несколько страниц, пользователь переходит с одной на другую по ссылкам или вводит новый адрес в строке браузера. Каждый такой переход - это навигация: фреймворк должен показать нужный контент и обновить URL, чтобы адрес можно было скопировать или открыть заново.

Привычный тег a с атрибутом href ведёт себя просто: браузер запрашивает новый HTML-документ у сервера, полностью заменяет текущую страницу и снова загружает скрипты, стили и картинки. Даже если шапка, меню и подвал на сайте одинаковые, они скачиваются и строятся заново.

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

Одностраничное поведение

В чистом Vue без Nuxt часто делают одностраничное приложение: пользователь формально остаётся на одном документе, а JavaScript подменяет блоки на экране. Адрес в строке может меняться, но полной перезагрузки нет. Такой подход быстрый для кликов по сайту, но при первом заходе поисковику и браузеру нужен готовый HTML - об этом мы уже говорили в разделе об основах Nuxt.

Nuxt совмещает оба мира. Если человек открывает адрес напрямую или обновляет страницу, сервер отдаёт полноценный HTML с содержимым. Если же он уже на сайте и переходит по внутренним ссылкам так, как задумано фреймворком, документ целиком не перезагружается: подгружается нужная страница, обновляется NuxtPage внутри приложения, а общие части вроде макета остаются на месте.

Зачем это разработчику

Файлы в app/pages по-прежнему задают, какие адреса существуют на сайте. Навигация не отменяет роутинг, а описывает, как удобно переводить пользователя с одного маршрута на другой без лишней работы браузера.

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

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

Иногда переход нужен не из разметки, а из логики: после проверки формы, по нажатию кнопки, по таймеру. Тогда маршрут меняют из скрипта с помощью отдельного API фреймворка. Разделение «клик по ссылке» и «переход из кода» помогает держать интерфейс предсказуемым.

В следующих материалах раздела мы увидим конкретные инструменты Nuxt для таких переходов и соберём их в типичном интерфейсе сайта.