Как сделать динамические хлебные крошки?

Для создания динамических хлебных крошек в Nuxt.js можно использовать модуль @nuxtjs/breadcrumbs.

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

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

1. Установите модуль @nuxtjs/breadcrumbs с помощью следующей команды:

npm install @nuxtjs/breadcrumbs

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

modules: [
  '@nuxtjs/breadcrumbs'
],

3. Определите хлебные крошки для каждого маршрута в файлах маршрутизации router.js или nuxt.config.js. Для этого добавьте свойство breadcrumbs к определению маршрутов:

export default {
  routes: [
    {
      path: '/',
      component: 'pages/index.vue',
      breadcrumbs: [
        {
          text: 'Home',
          href: '/'
        }
      ]
    },
    {
      path: '/about',
      component: 'pages/about.vue',
      breadcrumbs: [
        {
          text: 'Home',
          href: '/'
        },
        {
          text: 'About',
          href: '/about'
        }
      ]
    }
  ]
}

4. Используйте глобальный компонент NuxtBreadcrumb в шаблоне вашей страницы для отображения хлебных крошек:

<template>
  <div>
    <NuxtBreadcrumb :links="links" />
    <!-- Контент страницы -->
  </div>
</template>

<script>
export default {
  computed: {
    links() {
      return this.$breadcrumbs.get()
    }
  }
}
</script>

5. Повторите шаги 3 и 4 для всех маршрутов, для которых вы хотите отобразить хлебные крошки.

Теперь при переходе на страницу в вашем приложении Nuxt.js в зависимости от настроек маршрутов будут динамически генерироваться хлебные крошки и отображаться в соответствующем компоненте.