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

Одна из ключевых возможностей Nuxt — файловый маршрутизатор: каждый Vue-файл в pages/ задаёт свой URL и рендерит своё содержимое. Динамические импорты по страницам дают разделение кода — в браузер уходит минимум JS для текущего маршрута.

Страницы

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

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

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

{
  "routes": [
    {
      "path": "/about",
      "component": "pages/about.vue"
    },
    {
      "path": "/",
      "component": "pages/index.vue"
    },
    {
      "path": "/posts/:id",
      "component": "pages/posts/[id].vue"
    }
  ]
}

Навигация

Компонент <NuxtLink> связывает страницы: в разметке это <a> с корректным href. После гидратации навигация идёт через JS (обновление адреса в браузере) без полной перезагрузки, с поддержкой анимаций перехода.

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

<template>
  <header>
    <nav>
      <ul>
        <li><NuxtLink to="/about">About</NuxtLink></li>
        <li><NuxtLink to="/posts/1">Post 1</NuxtLink></li>
        <li><NuxtLink to="/posts/2">Post 2</NuxtLink></li>
      </ul>
    </nav>
  </header>
</template>

Параметры маршрута

Композабл useRoute() может быть использован в блоке <script setup> или в методе setup() компонента Vue для получения деталей текущего маршрута.

<script setup lang="ts">
const route = useRoute()

// When accessing /posts/1, route.params.id will be 1
console.log(route.params.id)
</script>

Посредники маршрута

Nuxt предоставляет настраиваемый механизм посредников маршрута (в коде и каталоге — middleware), удобный для группировки логики, которую нужно выполнить перед переходом к маршруту.

Существует три вида посредников маршрута:

1. Анонимные (встроенные) — задаются прямо на тех страницах, где используются.
2. Именованные — лежат в middleware/ и подключаются на странице по имени файла (примечание: имя нормализуется в kebab-case: someMiddleware → some-middleware).
3. Глобальные — файлы в middleware/ с суффиксом .global, выполняются при каждой смене маршрута.

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

function isAuthenticated (): boolean { return false }
// ---cut---
export default defineNuxtRouteMiddleware((to, from) => {
  // isAuthenticated() is an example method verifying if a user is authenticated
  if (isAuthenticated() === false) {
    return navigateTo('/login')
  }
})

<script setup lang="ts">
definePageMeta({
  middleware: 'auth',
})
</script>

<template>
  <h1>Welcome to your dashboard</h1>
</template>

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

Валидация маршрутов задаётся свойством validate в definePageMeta() на нужных страницах.

Свойство validate получает route. Можно вернуть boolean, чтобы указать, допустим ли этот маршрут для данной страницы. При false будет ошибка 404. Также можно вернуть объект с полями status и statusText, чтобы задать ответ об ошибке.

Если у вас более сложный сценарий, можно использовать анонимные посредники маршрута.

<script setup lang="ts">
definePageMeta({
  validate (route) {
    // Check if the id is made up of digits
    return typeof route.params.id === 'string' && /^\d+$/.test(route.params.id)
  },
})
</script>