Для создания динамических хлебных крошек в Nuxt без использования сторонних плагинов, можно воспользоваться возможностями самого Nuxt, такими как мидлвары (middleware), плагины и встроенной системой маршрутизации на основе файловых путей `/pages`. Используйте навигационные хуки страниц и meta-теги, чтобы прописать информацию о каждом уровне навигации.
Вот пример реализации динамических хлебных крошек:
1. Создайте компонент `Breadcrumbs.vue`, который будет отображать хлебные крошки:
```vue
<template>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li v-for="(crumb, index) in breadcrumbs" :key="index" class="breadcrumb-item">
<nuxt-link v-if="!crumb.active" :to="crumb.to">{{ crumb.text }}</nuxt-link>
<span v-else>{{ crumb.text }}</span>
</li>
</ol>
</nav>
</template>
<script>
export default {
computed: {
breadcrumbs() {
const routes = this.$route.matched.map(route => {
return {
text: route.meta.title || route.path, // Используйте meta-title или путь, если заголовок не задан
to: {
path: route.path, // Свежий путь для каждого сегмента маршрута
params: route.params, // Параметры маршрута
},
active: route.path === this.$route.path // Активный элемент без ссылки
};
});
return routes;
}
},
};
</script>
```
2. Добавьте мета-информацию о заголовке в маршрут страницы (пример для страницы с динамическим параметром):
```javascript
export default {
data() {
return {
// Данные, которые вы можете использовать для вывода в хлебные крошки
};
},
async asyncData({ params }) {
// Запрос к API для получения данных, если требуется
},
head() {
return {
title: 'Название страницы', // Заголовок, который вы можете использовать для хлебных крошек или для тега <title>
};
},
middleware: 'breadcrumbs', // Можно использовать мидлвар для установки заголовка маршрута
}
```
3. Создайте мидлвар `middleware/breadcrumbs.js`, который будет обновлять мета-информацию на основе текущего маршрута и параметров:
```javascript
export default function ({ route, store }) {
// Определите или получите название текущего маршрута, возможно, делая запрос к API или используя параметры
const title = 'Название страницы';
// Обновите meta информацию текущего маршрута
route.meta.title = title;
}
```
4. Теперь каждый раз, когда пользователь переходит на новую страницу, мидлвар `breadcrumbs` обновит мета-информацию маршрута, и компонент `Breadcrumbs.vue` отобразит актуальные хлебные крошки.
5. Наконец, вставьте компонент `Breadcrumbs.vue` в ваш шаблон страницы (например, в `layouts/default.vue`), чтобы он отображался на всех страницах:
```vue
<template>
<div>
<!-- Хлебные крошки -->
<breadcrumbs />
<!-- Содержание страницы -->
<nuxt />
</div>
</template>
```
Теперь у вас есть система динамических хлебных крошек, которая работает без дополнительных плагинов, и использует механизмы Nuxt для