I
I
ivankirshin2019-02-10 14:50:29
Vue.js
ivankirshin, 2019-02-10 14:50:29

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

1 answer(s)
D
Dmitry Ivanov, 2020-10-21
@ivanopol

Huh, but I'm interested too :)

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question