index.vue 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. <template>
  2. <el-breadcrumb class="vab-breadcrumb" separator="/">
  3. <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index" :to="handleTo(item.redirect)">
  4. <vab-icon v-if="item.meta && item.meta.icon" :icon="item.meta.icon" />
  5. <span>{{ translate(item.meta.title) }}</span>
  6. </el-breadcrumb-item>
  7. </el-breadcrumb>
  8. </template>
  9. <script lang="ts" setup>
  10. import { translate } from '/@/i18n'
  11. import { useRoutesStore } from '/@/store/modules/routes'
  12. import { handleMatched } from '/@/utils/routes'
  13. defineOptions({
  14. name: 'VabBreadcrumb',
  15. })
  16. const route = useRoute()
  17. const routesStore = useRoutesStore()
  18. const { getRoutes: routes } = storeToRefs(routesStore)
  19. const breadcrumbList: any = computed(() => handleMatched(routes.value, route.path).filter((item) => !item.meta.breadcrumbHidden))
  20. const handleTo = (path: any) => {
  21. if (path) return { path }
  22. }
  23. </script>
  24. <style lang="scss" scoped>
  25. .vab-breadcrumb {
  26. display: flex;
  27. align-items: center;
  28. justify-content: center;
  29. height: var(--el-nav-height);
  30. :deep() {
  31. .el-breadcrumb__item {
  32. .el-breadcrumb__inner {
  33. font-weight: normal;
  34. }
  35. }
  36. }
  37. }
  38. </style>