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

Для создания динамических хлебных крошек (breadcrumbs) на Nuxt.js 2.17 вам понадобится следующий набор инструментов: middleware, мета-данные и компоненты.

1. Сначала вам нужно создать middleware, который будет обрабатывать текущий маршрут и формировать данные для хлебных крошек. Создайте файл middleware/breadcrumbs.js со следующим содержимым:

export default function ({ app, route, redirect }) {
  // Создайте пустой массив для хлебных крошек
  const breadcrumbs = []

  // Добавьте домашнюю страницу в качестве первой хлебной крошки
  breadcrumbs.push({ text: 'Home', to: '/' })

  // Итерируйте по текущему маршруту, чтобы сформировать остальные хлебные крошки
  route.matched.forEach((route) => {
    // Извлеките название текущего маршрута
    const text = route.name
      ? app.i18n.t(`routes.${route.name}`)
      : ''

    // Добавьте хлебную крошку в массив
    breadcrumbs.push({
      text: text,
      to: route.path,
    })
  })

  // Сохраните данные хлебных крошек в объекте состояния
  app.store.commit('breadcrumbs/setBreadcrumbs', breadcrumbs)
}

2. Затем включите middleware в вашем файле nuxt.config.js. Укажите middleware в опции router:

export default {
  // ...
  router: {
    middleware: 'breadcrumbs',
  },
  // ...
}

3. Создайте файл store/breadcrumbs.js, чтобы сохранить данные хлебных крошек в хранилище Vuex. Создайте геттер, мутацию и начальное состояние для хлебных крошек:

export const state = () => ({
  breadcrumbs: [],
})

export const getters = {
  breadcrumbs: (state) => state.breadcrumbs,
}

export const mutations = {
  setBreadcrumbs(state, breadcrumbs) {
    state.breadcrumbs = breadcrumbs
  },
}

4. Наконец, создайте компонент Breadcrumbs.vue, который будет отображать хлебные крошки в вашем приложении:

<template>
  <nav>
    <ul>
      <li v-for="(breadcrumb, index) in breadcrumbs" :key="index">
        <nuxt-link :to="breadcrumb.to">{{ breadcrumb.text }}</nuxt-link>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  computed: {
    breadcrumbs() {
      return this.$store.getters['breadcrumbs/breadcrumbs']
    },
  },
}
</script>

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