Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | 4x 8x 4x 4x 4x 6x 4x 2x | <template>
<div class="q-breadcrumbs">
<template v-for="crumb in breadcrumbs">
<router-link
:key="crumb.name || crumb.path"
:to="pushTo(crumb)"
active-class="q-breadcrumbs__crumb_active"
exact-active-class="q-breadcrumbs__crumb_exact-active"
class="q-breadcrumbs__crumb"
>
{{ crumb.meta.breadcrumb }}
</router-link>
<span
:key="`${crumb.name || crumb.path}divider`"
class="q-breadcrumbs__divider q-icon-arrow-right"
/>
</template>
<div class="q-breadcrumbs__crumb q-breadcrumbs__crumb_last">
{{ lastCrumb }}
</div>
</div>
</template>
<script>
export default {
name: 'QBreadcrumbs',
componentName: 'QBreadcrumbs',
/**
* if you have vue router, QBreadcrumbs will get crumbs from this.$route.matched
*/
props: {
/**
* custom last crumb
*/
last: {
type: String,
default: null
},
/**
* Array of Objects, object must contain required fields: `path` - uses as route path, `name` - route name, `meta` - must contain `breadcrumb` - visible title
*/
customRoutes: {
type: Array,
default: null
}
},
computed: {
crumbs() {
const routes = this.customRoutes ?? this.$route.matched;
return routes.filter(route => route.meta?.breadcrumb);
},
breadcrumbs() {
const breadcrumbs = [...this.crumbs];
breadcrumbs.pop();
return breadcrumbs;
},
lastCrumb() {
if (this.last) return this.last;
return this.crumbs[this.crumbs.length - 1]?.meta.breadcrumb ?? '';
}
},
methods: {
pushTo({ name, path }) {
return name ? { name } : path;
}
}
};
</script>
|