PricingLoginStart free
Frontend Academy · Урок

Файловая маршрутизация и автоматические импорты

Создавайте страницы в каталоге pages/ для автоматической маршрутизации, изучайте динамические сегменты и используйте автоматические импорты Nuxt для компонентов и композаблов

Урок 1 из 414 шагов

«Файловая маршрутизация и автоматические импорты» — бесплатный урок Frontend Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Nuxt 3 — SSR-фреймворк для Vue

Nuxt 3 для Vue — то же, что Next.js для React: фреймворк с заданными соглашениями для SSR, SSG, маршрутизации на основе файлов, получения данных и глубокой системы автоматического импорта.

Каталог pages/

Поместите компоненты Vue в pages/, и они станут маршрутами — настройка маршрутизатора не требуется.

pages/
  index.vue        // route: /
  about.vue        // route: /about
  blog/
    index.vue      // route: /blog
    [slug].vue     // route: /blog/:slug
  users/
    [id]/
      profile.vue  // route: /users/:id/profile

Динамические маршруты с [param]

Квадратные скобки в именах файлов создают динамические сегменты. Получайте параметры с помощью useRoute().

<!-- pages/blog/[slug].vue -->
<script setup>
const route = useRoute();
const { data: post } = await useFetch(`/api/posts/${route.params.slug}`);
</script>

<template>
  <article>
    <h1>{{ post.title }}</h1>
    <div v-html="post.body" />
  </article>
</template>

Маршруты для любых вложенных путей

Используйте [...slug].vue для маршрутов, охватывающих любые вложенные пути, — такой маршрут соответствует любому пути внутри этой папки.

// pages/docs/[...slug].vue
// matches /docs/getting-started, /docs/api/auth, etc.

<script setup>
const route = useRoute();
console.log(route.params.slug); // ['api', 'auth']
</script>

Макеты

Компоненты в layouts/ оборачивают страницы. Выбирайте активный макет для каждой страницы с помощью definePageMeta.

<!-- layouts/dashboard.vue -->
<template>
  <div class="dashboard">
    <Sidebar />
    <main><slot /></main>
  </div>
</template>

<!-- pages/dashboard/index.vue -->
<script setup>
definePageMeta({ layout: 'dashboard' });
</script>

Макет по умолчанию

layouts/default.vue применяется к любой странице, для которой не указан макет.

Навигация с помощью NuxtLink

Используйте <NuxtLink> для навигации на стороне клиента — Nuxt предварительно получает связанные страницы при наведении.

<template>
  <nav>
    <NuxtLink to="/">Home</NuxtLink>
    <NuxtLink to="/blog">Blog</NuxtLink>
    <NuxtLink :to="`/users/${userId}`">Profile</NuxtLink>
  </nav>
</template>

Программная навигация

Используйте navigateTo() в setup или обработчиках событий.

<script setup>
async function onLogin() {
  await login(form);
  await navigateTo('/dashboard');
}
</script>

Автоматический импорт — компоненты

Поместите компонент в components/ и используйте его в любом шаблоне без импорта — Nuxt просканирует компоненты и зарегистрирует их.

components/
  AppHeader.vue
  UserCard.vue

<!-- any page or component: -->
<template>
  <AppHeader />
  <UserCard :user="user" />
</template>

Автоматический импорт — композаблы

Композаблы в composables/ импортируются автоматически.

// composables/useCounter.ts
export const useCounter = () => {
  const count = ref(0);
  const increment = () => count.value++;
  return { count, increment };
};

<!-- any component: -->
<script setup>
const { count, increment } = useCounter(); // no import needed!
</script>

Автоматический импорт — утилиты

Утилиты Vue (ref, reactive, computed, watch и т. д.) и утилиты Nuxt (useFetch, useState, navigateTo) импортируются автоматически.

Отключение автоматического импорта

Вы можете отключить конкретный автоматический импорт в nuxt.config.ts, если он конфликтует с чем-либо ещё.

export default defineNuxtConfig({
  imports: {
    autoImport: false // disable all auto-imports
  }
});

Быстрая проверка

Как создать в Nuxt 3 маршрут, соответствующий любому пути внутри /docs/?

Ответь в интерактивном уроке

Итоги: маршрутизация и автоматический импорт

Папка pages/ создаёт маршруты. [param] используется для динамических маршрутов, [...slug] — для маршрутов, охватывающих любые вложенные пути. Макеты в layouts/ выбираются с помощью definePageMeta. NuxtLink и navigateTo используются для навигации. Компоненты, composables/, а также утилиты Vue и Nuxt импортируются автоматически — ручной импорт не нужен. При необходимости отключите его в nuxt.config.ts.

Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы
41
Уроки
163
Начать учиться бесплатноПосмотреть полный курс

Часто задаваемые вопросы

Урок «Файловая маршрутизация и автоматические импорты» бесплатный?

Да — полный текст урока «Файловая маршрутизация и автоматические импорты» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «Файловая маршрутизация и автоматические импорты»?

Создавайте страницы в каталоге pages/ для автоматической маршрутизации, изучайте динамические сегменты и используйте автоматические импорты Nuxt для компонентов и композаблов Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Файловая маршрутизация и автоматические импорты»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Файловая маршрутизация и автоматические импорты
  2. useFetch и useAsyncData
  3. Модули Nuxt: изображения, аутентификация и интернационализация
  4. Развёртывание: статика и SSR
← Назад к Frontend Academy