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

---

Одной из основных функций Nuxt является маршрутизатор на основе файловой системы. Каждый файл Vue внутри каталога app/pages/ создает соответствующий URL (или маршрут), который отображает содержимое файла. Используя динамический импорт для каждой страницы, Nuxt использует разделение кода для отправки минимального количества JavaScript для запрошенного маршрута.

Страницы

Маршрутизация Nuxt основана на vue-router и генерирует маршруты для каждого компонента, созданного в каталоге app/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, соответствующим маршруту страницы. После загрузки приложения переходы между страницами выполняются на JavaScript путем обновления URL-адреса браузера. Это предотвращает обновление всей страницы и позволяет использовать анимированные переходы.

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

<!-- app/pages/index.vue -->

<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 для доступа к деталям текущего маршрута.

<!-- pages/posts/[id].vue -->

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

// При обращении к /posts/1 значение route.params.id будет равно 1
console.log(route.params.id)
</script>

 

Промежуточный слой для маршрутизации

Nuxt предоставляет настраиваемый фреймворк для написание промежуточных слоев (мидлвар) для маршрутов, который вы можете использовать в своем приложении, идеально подходящий для извлечения кода, который вы хотите запустить перед переходом к определенному маршруту.

Существует три вида промежуточных слоев для маршрутизации:

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

Пример промежуточного слоя для аутентификации, защищающего страницу /dashboard:

// middleware/auth.ts

function isAuthenticated (): boolean { return false }
// ...
export default defineNuxtRouteMiddleware((to, from) => {
  // isAuthenticated() - это пример метода, который проверяет, прошел ли пользователь аутентификацию
  if (isAuthenticated() === false) {
    return navigateTo('/login')
  }
})

 

<!-- pages/dashboard.vue -->

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

<template>
  <h1>Добро пожаловать на вашу панель управления</h1>
</template>

 

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

Nuxt предлагает проверку маршрута с помощью свойства validate в definePageMeta() на каждой странице, которую вы хотите проверить.

Свойство validate принимает route в качестве аргумента. Вы можете вернуть логическое значение, чтобы определить, является ли этот маршрут допустимым для отображения на этой странице. Если вы вернете значение false, это приведет к ошибке 404. Вы также можете напрямую вернуть объект со status/statusText, чтобы настроить возвращаемую ошибку.

Если у вас более сложный вариант использования, то вместо этого вы можете использовать промежуточное программное обеспечение анонимного маршрута.

<!-- pages/posts/[id].vue -->

<script setup lang="ts">
definePageMeta({
  validate (route) {
    // Проверяем, состоит ли идентификатор из цифр
    return typeof route.params.id === 'string' && /^\d+$/.test(route.params.id)
  },
})
</script>