51 lines
1.3 KiB
Vue
51 lines
1.3 KiB
Vue
<template>
|
|
<el-breadcrumb
|
|
separator="/"
|
|
style="margin: 15px 10px; font-size: 1.05rem; opacity: 0.9"
|
|
>
|
|
<el-breadcrumb-item>
|
|
<span class="title">工控運維管理平台</span>
|
|
</el-breadcrumb-item>
|
|
<el-breadcrumb-item
|
|
v-for="(item, idx) in breadcrumbs"
|
|
:key=" idx"
|
|
:to="item.name ? { name: item.name } : undefined"
|
|
>
|
|
<span>{{ item.title }}</span>
|
|
</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from "vue";
|
|
import { useRoute } from "vue-router";
|
|
import { menuConfig } from "../../constants/menuConfig.js";
|
|
|
|
const route = useRoute();
|
|
|
|
function findBreadcrumbs(menu, route, path = []) {
|
|
for (const item of menu) {
|
|
const currentPath = [...path, { title: item.title, name: item.routeName || null }];
|
|
if (item.routeName === route.name) {
|
|
if (item.params) {
|
|
const paramsMatch = Object.keys(item.params).every(key => item.params[key] == route.params[key]);
|
|
if (paramsMatch) {
|
|
return currentPath;
|
|
}
|
|
} else {
|
|
return currentPath;
|
|
}
|
|
}
|
|
if (item.children) {
|
|
const result = findBreadcrumbs(item.children, route, currentPath);
|
|
if (result) return result;
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
|
|
const breadcrumbs = computed(() => {
|
|
return findBreadcrumbs(menuConfig, route) || [];
|
|
});
|
|
</script>
|