Answer the question
In order to leave comments, you need to log in
How to make vue-router breadcrumbs?
The only way I've googled is to set the page name in the meta and then loop through the routes that matched.
But what if one of the path segments is dynamic and I get the title already in the component itself after the API request?
<template lang="pug">
div.breadcrumbs
router-link(
v-for="link, i in breadcrumbsLinks"
:key="i"
:to="link"
).breadcrumps__level {{link.meta.title}}
</template>
<script>
export default {
name: 'breadcrumbs',
computed: {
breadcrumbsLinks () {
let tmp = []
if (this.$route.matched) {
this.$route.matched.forEach(link => {
tmp.push(Object.assign({meta: {title: 'Title not found in meta'}}, link))
})
}
if (tmp.length === 0) {
tmp.push({path: '/', meta: {title: 'Home'}})
}
return tmp
}
}
}
</script>
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question