Руководство по настройке маршрутизации в Nuxt

Введение

Маршрутизация (routing) — одна из ключевых особенностей Nuxt, позволяющая определять, как пользователи переходят между страницами приложения. Если вы используете Nuxt для создания современного веб-приложения на Vue, понимание работы маршрутизатора позволяет строить гибкую навигацию, реализовывать динамические страницы или защищать разделы сайта.

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

Как работает маршрутизация в Nuxt

Автоматическая маршрутизация на основе файловой структуры

Одна из самых удобных особенностей Nuxt — автоматическое создание роутов из структуры папки pages. Это значит, что создавая новый файл внутри этой папки, вы автоматически добавляете новую страницу и маршрут в приложение.

Пример:

pages/
  index.vue       // будет доступен по адресу /
  about.vue       // будет доступен по адресу /about
  blog/
    index.vue     // будет доступен по адресу /blog
    post.vue      // будет доступен по адресу /blog/post

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

Иногда, даже детальное знание маршрутизации не заменит понимания общей картины. Nuxt - это не просто набор инструментов, это целая экосистема, которая предлагает готовые решения для большинства задач, с которыми сталкивается современный веб-разработчик. От SSR и SEO до управления состоянием и API endpoints. Если вы хотите детальнее погрузиться в мир Nuxt и научиться использовать его возможности на полную мощность — приходите на наш большой курс Nuxt - fullstack Vue фреймворк. На курсе 129 уроков и 13 упражнений, AI-тренажеры для безлимитной практики с кодом и задачами 24/7, решение задач с живым ревью наставника, еженедельные встречи с менторами.

Осуществление переходов между страницами

Переходить между страницами проще всего с помощью компонента nuxt-link, который работает аналогично стандартному тегу <a>, но не перезагружает страницу и сохраняет состояние приложения.

<template>
  <nav>
    <nuxt-link to="/">Главная</nuxt-link>
    <nuxt-link to="/about">О нас</nuxt-link>
  </nav>
</template>

Вы также можете программно переходить по маршрутам внутри компонентов, используя объект $router:

export default {
  methods: {
    goToBlog() {
      // Программный переход на страницу /blog
      this.$router.push('/blog')
    }
  }
}

Динамические маршруты в Nuxt

Создание динамических страниц

Если вы хотите, чтобы страница открывалась для разных параметров (например, конкретная статья по ID), достаточно создать файл с квадратными скобками:

pages/posts/_id.vue  // станет маршрутом /posts/:id

Теперь каждый путь вида /posts/123, /posts/abc будет генерировать страницу, на которую попадут соответствующие параметры.

Доступ к параметрам маршрута осуществляется через context в методах asyncData или fetch, а внутри компонента — через $route.params.

export default {
  async asyncData({ params }) {
    // params.id будет содержать значение из адреса
    // Например, если маршрут /posts/10, params.id = '10'
    return {
      postId: params.id
    }
  }
}

Или внутри компонента:

export default {
  mounted() {
    // this.$route.params.id даст текущий параметр маршрута
    console.log(this.$route.params.id)
  }
}

Мультидинамические маршруты и вложенные динамические сегменты

Вы можете использовать несколько динамических сегментов одновременно. Например:

pages/users/_userId/posts/_postId.vue 
// маршрут: /users/:userId/posts/:postId

В качестве значения каждый сегмент будет получать свою часть из адреса.

Вложенные маршруты и структура папок

Nuxt позволяет строить вложенные страницы через создание папок внутри папки pages.

Пример структуры:

pages/
  dashboard/
    index.vue           // /dashboard
    analytics.vue       // /dashboard/analytics
    settings/
      index.vue         // /dashboard/settings
      profile.vue       // /dashboard/settings/profile

index.vue в любом каталоге будет являться страницей по умолчанию для этого пути.

Давайте рассмотрим, как такое решение отражается в адресах:

• /dashboard — по этому адресу откроется pages/dashboard/index.vue
• /dashboard/analytics — откроется pages/dashboard/analytics.vue
• /dashboard/settings/profile — откроется pages/dashboard/settings/profile.vue

Вложенность не ограничена двумя уровнями — вы вольны создавать столько подкаталогов, сколько необходимо, чтобы реализовать логику проекта.

Создание "чистых" вложенных страниц с помощью Nuxt Child

Если вы хотите, чтобы родительский компонент включал в себя общий layout и отображал разные дочерние страницы внутри себя, используйте компоненты <nuxt-child> и конструкции со вставками.

Пример:

pages/account.vue js <template> <div> <h1>Личный кабинет</h1> <!-- В этом месте будет отображаться контент дочерней страницы --> <nuxt-child /> </div> </template>

pages/account/profile.vue
pages/account/settings.vue

В этом случае если вы зайдёте на /account/profile или /account/settings содержимое этих страниц отобразится внутри родительского компонента pages/account.vue в месте <nuxt-child />, сохраняя общий внешний вид и логику.

Использование параметров запроса и дополнительных данных

Параметры запроса (query params) автоматически становятся доступны через $route.query.

Пример: Адрес: /blog?tag=vue&page=2

Внутри компонента: js export default { mounted() { // this.$route.query.tag даст 'vue' // this.$route.query.page даст '2' console.log(this.$route.query) } }

Обработка ошибок и настройка страницы 404

Nuxt может показывать собственную страницу ошибки. Просто создайте файл layouts/error.vue — он будет обрабатывать все ошибки маршрутизации, включая 404.

<template>
  <div>
    <h1 v-if="error.statusCode === 404">Страница не найдена</h1>
    <p>{{ error.message }}</p>
  </div>
</template>

<script>
export default {
  props: ['error']
}
</script>

Кастомизация роутера через nuxt.config.js

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

Для этого используются хуки в nuxt.config.js:

// nuxt.config.js
export default {
  router: {
    extendRoutes(routes, resolve) {
      // Давайте выведем все маршруты, чтобы их посмотреть
      console.log(routes)
      // Можно добавлять новые маршруты, удалять или изменять существующие
      routes.push({
        name: 'custom',
        path: '/custom',
        component: resolve(__dirname, 'pages/custom.vue')
      })
    }
  }
}

Смотрите, как вы можете добавить, удалить или изменить существующий маршрут.

Навигационные охраны (navigation guards) и middleware

Как и во Vue Router, тут доступны свои guard-функции через middleware. С их помощью вы можете контролировать доступ к страницам, проверять авторизацию и выполнять другие действия до рендеринга страницы.

Глобальные middleware

Создайте файл в папке middleware, например auth.js:

// middleware/auth.js

export default function ({ store, redirect }) {
  // Например, если пользователь не авторизован, отправить его на /login
  if (!store.state.authenticated) {
    return redirect('/login')
  }
}

Подключить middleware к маршруту можно в самой странице:

export default {
  middleware: 'auth'
}

Или глобально для всех страниц через nuxt.config.js:

export default {
  router: {
    middleware: ['auth']
  }
}

Генерация статических маршрутов при сборке (для Nuxt static)

Nuxt в режиме статической генерации (nuxt generate) создает страницы для всех файлов и динамических маршрутов, которые может определить. Для динамических страниц потребуется явно указать значения параметров, чтобы сгенерировать соответствующие HTML-файлы.

// nuxt.config.js
export default {
  generate: {
    routes: [
      '/posts/1',
      '/posts/2',
      '/posts/3'
    ]
  }
}

Это позволит создать статические файлы для /posts/1, /posts/2 и так далее. Выгрузите список нужных маршрутов из CMS, базы или API на этапе генерации.

Использование именованных маршрутов

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

Перейти к маршруту по имени можно с помощью метода:

this.$router.push({ name: 'about' })

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

Дополнительные возможности и оптимизации

• Ленивая загрузка страниц: Nuxt автоматически разбивает приложение на чанки страниц, что ускоряет первоначальную загрузку.
• Схема кэширования: Используйте middleware или параметры маршрута для реализации кэширования данных.
• Группировка маршрутов: С помощью префиксов в nuxt.config.js можно сгруппировать маршруты для админки, публичной части и др.

Заключение

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

В процессе разработки часто возникает потребность в оптимизации маршрутов для SEO. Но даже самые продвинутые настройки роутинга не дадут желаемого результата, если не понимать, как Nuxt работает с SEO в целом. Чтобы получить полное представление о том, как создавать быстрые, оптимизированные и удобные для поисковых систем сайты, рекомендуем пройти наш курс Nuxt - fullstack Vue фреймворк. В первых 3 модулях уже доступно бесплатное содержание — начните погружаться в Nuxt прямо сегодня.

Частозадаваемые технические вопросы по теме статьи и ответы на них

Вопрос 1. Как отловить событие смены маршрута и выполнить действие на каждой странице?
Ответ:
В Nuxt можно использовать хук beforeRouteUpdate в компонентах, если нужен контроль на уровне страницы, или глобальные хуки через плагин:

// plugins/router.js
export default ({ app }) => {
  app.router.beforeEach((to, from, next) => {
    // Ваш код, например логирование или сброс состояния
    next()
  })
}

Не забудьте зарегистрировать плагин в nuxt.config.js.

Вопрос 2. Как сделать редирект с одной страницы на другую при входе на маршрут?
Ответ:
Используйте middleware:

// middleware/redirect.js
export default function ({ redirect }) {
  return redirect('/new-path')
}

И подключите на нужной странице через опцию middleware.

Вопрос 3. Можно ли использовать параметры маршрута в asyncData у страницы?
Ответ:
Да, доступны через объект params: js export default { async asyncData({ params }) { // params.id и другие параметры доступны сразу return { ... } } }

Вопрос 4. Как добавить вложенные layout только для подгруппы маршрутов?
Ответ:
В каждой странице можно задать имя layout: js export default { layout: 'admin' // имя вашего layout-файла } Создайте layouts/admin.vue и используйте для административных страниц.

Вопрос 5. Почему мой динамический маршрут не работает для catch-all (например, /posts/*)?
Ответ:
Используйте синтаксис _slug.vue для динамического сегмента или [...slug].vue для catch-all (начиная с Nuxt 2.13+):

pages/posts/_slug.vue        // /posts/123
pages/posts/[...slug].vue    // /posts/a/b/c

Такой файл будет принимать любые вложенные параметры.