Как в Nuxt 3 сделать динамические breadcrumbs?

Для создания динамических breadcrumbs в Nuxt 3 вам понадобится использовать роутинг и компоненты. Начнем с создания компонента для breadcrumbs.

1. Создайте новый компонент Breadcrumbs.vue в каталоге components (или любом другом удобном каталоге):

<template>
  <nav>
    <ol>
      <li v-for="(route, index) in currentRoute" :key="index">
        <nuxt-link :to="route.path">{{ route.name }}</nuxt-link>
      </li>
    </ol>
  </nav>
</template>

<script>
export default {
  computed: {
    currentRoute() {
      // Получаем текущий путь и разделяем его на сегменты
      const pathSegments = this.$route.path.split('/').filter(segment => segment !== '');

      // Собираем breadcrumbs для каждого сегмента пути
      return pathSegments.map((segment, index) => {
        const path = `/${pathSegments.slice(0, index + 1).join('/')}`;
        return {
          path,
          name: segment // здесь может быть логика получения имени из параметров или других источников данных
        };
      });
    }
  }
};
</script>

2. Далее, создайте маршрут в вашем файле nuxt.config.js, который будет использовать созданный компонент:

export default {
  // ...
  router: {
    extendRoutes(routes, resolve) {
      // Добавляем маршрут для breadcrumbs
      routes.push({
        name: 'breadcrumbs',
        path: '*',
        component: resolve(__dirname, 'components/Breadcrumbs.vue')
      });
    }
  },
  // ...
}

3. Теперь вы можете использовать созданный компонент Breadcrumbs в любом месте вашего приложения, где требуются breadcrumbs:

<template>
  <div>
    <Breadcrumbs />
    <!-- ... ваш контент ... -->
  </div>
</template>

<script>
import Breadcrumbs from '~/components/Breadcrumbs.vue';

export default {
  components: {
    Breadcrumbs
  }
};
</script>

Теперь, при переходе по различным маршрутам, компонент Breadcrumbs будет динамически отображать breadcrumbs для соответствующего пути. Обратите внимание, что в этом примере используется базовая настройка и вам может потребоваться настроить логику и стилизацию под свои нужды.