45 lines
1.2 KiB
Vue
45 lines
1.2 KiB
Vue
<template>
|
|
<el-breadcrumb class="app-breadcrumb">
|
|
<el-breadcrumb-item v-for="item in breadcrumbs" :key="item.path">
|
|
{{ item.meta.title }}
|
|
</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import type { RouteLocationMatched, RouteLocationNormalizedLoaded } from 'vue-router'
|
|
|
|
import { useWatchRoute } from '@/hooks/useWatchRoute'
|
|
|
|
const breadcrumbs = ref<RouteLocationMatched[]>([])
|
|
const getBreadcrumb = (route: RouteLocationNormalizedLoaded) => {
|
|
const matched = route.matched.filter((item) => item.meta && item.meta.title)
|
|
breadcrumbs.value = matched
|
|
}
|
|
|
|
useWatchRoute((route) => {
|
|
getBreadcrumb(route)
|
|
})
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
.app-breadcrumb {
|
|
:deep(.el-breadcrumb__item) {
|
|
.el-breadcrumb__inner {
|
|
color: var(--el-text-color-regular);
|
|
font-weight: 400;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
&:last-child .el-breadcrumb__inner {
|
|
color: var(--health-primary-dark, var(--el-color-primary));
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
:deep(.el-breadcrumb__separator) {
|
|
color: var(--el-text-color-secondary);
|
|
}
|
|
}
|
|
</style>
|