Struggling to develop a dynamic Breadcrumb-Component in Vue.js 3. After hours of research, I haven't found a suitable solution due to outdated methods or lack of flexibility. As a beginner in frontend development, I am unsure about the best library to use or if there are built-in Vue features that could assist me. Currently, I'm utilizing Vue3 and pinia.
Below is my current draft for the Breadcrumb component:
Breadcrumb.vue
<template>
<div id="breadcrumb">
<ul class="breadcrumb-wrapper">
<li v-for="(breadcrumb, index) in breadcrumbList" :key="index" @click="navigate(index)"
:class="{ 'linked': !!breadcrumb.link }">
{{ breadcrumb.name }}
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'Breadcrumb',
data() {
return {
breadcrumbList: []
}
},
mounted() { this.updateList() },
watch: { '$route'() { this.updateList() } },
methods: {
navigate(route) {
if (this.breadcrumbList[route].link) this.$router.push(this.breadcrumbList[route].link)
},
updateList() { this.breadcrumbList = this.$route.meta.breadcrumb }
}
}
</script>
I customize router entries like:
router.js
{
path: "/building/:slug-:id",
name: "building-detail",
component: BuildingDetail,
meta: {
breadcrumb: [
{ name: 'buildings', link: 'buildings' },
{ name: 'campus-detail', link: 'campus-detail' },
{ name: 'buildings-detail' }
]
}
},
I'm looking for a more efficient way to dynamically update names and links based on different pages. While my current approach may function, it feels incomplete and cumbersome. Is there a simpler method where I can store necessary data and URLs to pass them seamlessly between pages? Any insights from those who have tackled a similar challenge would be greatly appreciated.