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

1. Базовая маршрутизация с помощью Pages:
   Nuxt 3 использует подход к маршрутизации, основанный на соглашениях, где каждый файл в каталоге pagesсоответствует маршруту. Например, создание файла pages/about.vueавтоматически создаст маршрут для URL-адреса /about. Вот пример базового компонента страницы:

<template>
  <div>
    <h1>About Page</h1>
    <!-- Content goes here -->
  </div>
</template>

2. Динамическая маршрутизация с параметрами.
   Иногда вам может потребоваться создать динамические маршруты, принимающие параметры. Nuxt 3 упрощает это, используя синтаксис имени файла. Например, создание файла с именем pages/users/_id.vueсоздаст маршруты типа /users/1, /users/2и т. д. Вы можете получить доступ к файлу idпараметр в компоненте как this.$route.params.id. Вот пример:

<template>
  <div>
    <h1>User Profile</h1>
    <p>Showing profile for user with ID: {{ $route.params.id }}</p>
    <!-- Content goes here -->
  </div>
</template>

3. Вложенные маршруты.
   Nuxt 3 поддерживает вложенные маршруты, которые полезны для организации сложных структур приложений. Создавая вложенные каталоги в каталоге pages, вы можете определять вложенные маршруты. Например, pages/blog/index.vueбудет соответствовать маршруту /blog, а pages/blog/post.vue— /blog/post. Вот пример:

<template>
  <div>
    <h1>Blog</h1>
    <!-- List of blog posts -->
    <router-view />
  </div>
</template>

4. Именованные маршруты.
   Именованные маршруты позволяют ссылаться на маршруты по их имени, а не по URL-пути, что упрощает обработку изменений в структуре маршрутизации. Вы можете определить именованные маршруты в файле nuxt.config.jsи получить к ним доступ с помощью this.$router.name. Вот пример:

// nuxt.config.js
export default {
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        name: 'blog-post',
        path: '/blog/:slug',
        component: resolve(__dirname, 'pages/blog/post.vue')
      })
    }
  }
}
// Component usage
<template>
  <div>
    <h1>Blog Post</h1>
    <!-- Content goes here -->
  </div>
</template>
this.$router.push({ name: 'blog-post', params: { slug: 'my-blog-post' } })

5. Программная навигация.
   Помимо декларативной навигации с использованием <nuxt-link>, Nuxt 3 предоставляет параметры программной навигации через объект $router. Для программной навигации вы можете использовать такие методы, как $router.push()и $router.replace(). Вот пример:

methods: {
  goToAboutPage() {
    this.$router.push('/about')
  }
}

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