Files
manja_ui_dev/src/components/AppBreadcrumb.vue
T
2024-04-29 13:51:42 +02:00

37 lines
778 B
Vue

<script setup>
import { onMounted, ref } from 'vue'
import router from '@/router'
const breadcrumbs = ref()
const getBreadcrumbs = () => {
return router.currentRoute.value.matched.map((route) => {
return {
active: route.path === router.currentRoute.value.fullPath,
name: route.name,
path: `${router.options.history.base}${route.path}`,
}
})
}
router.afterEach(() => {
breadcrumbs.value = getBreadcrumbs()
})
onMounted(() => {
breadcrumbs.value = getBreadcrumbs()
})
</script>
<template>
<CBreadcrumb class="my-0">
<CBreadcrumbItem
v-for="item in breadcrumbs"
:key="item"
:href="item.active ? '' : item.path"
:active="item.active"
>
{{ item.name }}
</CBreadcrumbItem>
</CBreadcrumb>
</template>