Подскажите пожалуйста, как реализовать динамические хлебные крошки на Nuxt 2.17
Я потратил пару дней и нашел единственное приближенное по функционалу, что работает, но мне нужно чтобы у меня в хлебных крошках были названия страниц. ( в данный момент передает эндпоинты )
<template>
<div class="breadcrumbs">
<NuxtLink to="/">Home </NuxtLink>
<router-link v-for="(link, i) in breadcrumbs" :key="i" :to="link.to" class="breadcrumps__level">
/ {{ link.title }}
</router-link>
</div>
</template>
<script>
export default {
computed: {
breadcrumbs() {
const pathArray = this.$route.path.split('/')
pathArray.shift()
return pathArray.reduce((breadcrumbArray, path, idx) => {
breadcrumbArray.push({
to: !!breadcrumbArray[idx - 1]
? breadcrumbArray[idx - 1].to + '/' + path
: '/' + path,
title: path.toString().replace('-', ' '),
})
return breadcrumbArray
}, [])
}
}
}
</script>
Может у кого-то есть уже полноценное рабочее решение? Ну или как можно дополнить код, если возможно, без дополнительных расширений/ плагинов ?
Простой
Средний
