You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
72 lines
1.3 KiB
72 lines
1.3 KiB
<template>
|
|
<v-breadcrumbs :items="routes">
|
|
<template #divider>
|
|
<v-icon>mdi-chevron-right</v-icon>
|
|
</template>
|
|
</v-breadcrumbs>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "Breadcrumbs",
|
|
data() {
|
|
return {
|
|
width: undefined,
|
|
};
|
|
},
|
|
created() {
|
|
if (process.client) {
|
|
this.width = window.innerWidth;
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
window.addEventListener("resize", this.onResize);
|
|
});
|
|
},
|
|
beforeDestroy() {
|
|
window.removeEventListener("resize", this.onResize);
|
|
},
|
|
computed: {
|
|
windowWidth() {
|
|
if (process.client) {
|
|
this.width = window.innerWidth;
|
|
}
|
|
return this.width;
|
|
},
|
|
routes() {
|
|
const { matched } = this.$nuxt.$route;
|
|
const home = {
|
|
text: "ShowEasy",
|
|
href: this.localePath("/"),
|
|
disabled: false,
|
|
};
|
|
return [
|
|
home,
|
|
...matched.map(({ meta, path }) => {
|
|
const route = {
|
|
text: meta.name,
|
|
href: this.localePath(path),
|
|
disabled: false,
|
|
};
|
|
return route;
|
|
}),
|
|
];
|
|
},
|
|
},
|
|
methods: {
|
|
onResize() {
|
|
if (process.client) {
|
|
this.width = window.innerWidth;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
:deep() {
|
|
.v-breadcrumbs__item {
|
|
color: black !important;
|
|
}
|
|
}
|
|
</style>
|