Навигация: NuxtLink и navigateTo

Переход между страницами в Nuxt не перезагружает сайт: меняется только содержимое <NuxtPage />, а уже загруженный JavaScript остаётся. Для ссылок служит компонент <NuxtLink>, а для перехода из кода — функция navigateTo.

Ссылки в шапке

Добавьте меню в app/app.vue:

<!-- app/app.vue -->
<template>
  <div>
    <NuxtRouteAnnouncer />
    <header>
      <nav>
        <NuxtLink to="/">Главная</NuxtLink>
        <NuxtLink to="/posts">Статьи</NuxtLink>
        <NuxtLink to="/about">О блоге</NuxtLink>
      </nav>
    </header>
    <main>
      <NuxtPage />
    </main>
  </div>
</template>

<NuxtLink> выводит обычный тег <a>, но перехватывает щелчок и меняет страницу без перезагрузки. Пощёлкайте по меню: адрес в браузере меняется, а шапка не мигает.

Активная ссылка

Ссылке на текущую страницу Nuxt добавляет класс router-link-active, а при точном совпадении адреса — ещё и router-link-exact-active. Через них выделяют пункт меню:

<!-- app/app.vue -->
<style>
nav a.router-link-exact-active {
  font-weight: bold;
}
</style>

Пункт меню текущей страницы станет жирным.

Внешние ссылки

<NuxtLink> понимает и полные адреса:

<NuxtLink to="https://nuxt.com">Сайт Nuxt</NuxtLink>

Для внешнего адреса Nuxt выводит обычную ссылку с перезагрузкой страницы. Атрибут target="_blank" открывает её в новой вкладке.

Переход из кода

Иногда переход нужен после действия: например, после нажатия кнопки. Для этого есть navigateTo:

<!-- app/pages/about.vue -->
<script setup lang="ts">
async function goToPosts() {
  await navigateTo('/posts')
}
</script>
 
<template>
  <section>
    <h2>О блоге</h2>
    <button @click="goToPosts">Читать статьи</button>
  </section>
</template>

Кнопка откроет страницу /posts. navigateTo подключается автоматически, импортировать её не нужно.

Параметры navigateTo

Вызов	Что делает
`navigateTo('/posts')`	Переход на адрес
`navigateTo({ path: '/posts', query: { page: 2 } })`	Переход на `/posts?page=2`
`navigateTo('/login', { replace: true })`	Переход без новой записи в истории
`navigateTo('https://nuxt.com', { external: true })`	Переход на другой сайт

Предзагрузка

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

Частая ошибка

Ссылка <a href="/posts"> тоже работает, но браузер перезагружает весь сайт: заново скачивается JavaScript, сбрасывается состояние приложения. Для адресов внутри сайта всегда используйте <NuxtLink to="...">, а <a> оставьте для файлов вроде PDF.

Спасибо, что читаете!