一、封装面包屑组件
<template>
<el-breadcrumb :separator-icon="ArrowRight" v-if="routes.length" class="breadcrumb-items">
<el-breadcrumb-item
v-for="route in routes"
:key="route.name"
:to="route.path"
:class="{ 'active-title': route.name == activeTitle }"
>
{{ route.meta.title }}
</el-breadcrumb-item>
</el-breadcrumb>
</template>
<script setup lang="ts">
import { defineProps, PropType, computed } from "vue";
import { RouteRecordRaw } from "vue-router";
import { ArrowRight } from "@element-plus/icons-vue";
const props = defineProps({
routes: {
type: Array as PropType<RouteRecordRaw[]>,
default: () => []
},
activeTitle: {
type: String,
default: ""
}
});
const routes = computed(() => props.routes);
const activeTitle = computed(() => props.activeTitle);
</script>
<style scoped lang="less">
.breadcrumb-items {
margin: 0px 0px 10px 0px;
.active-title {
font-size: 24px;
}
}
</style>
二、使用面包屑组件
<template #viewer>
<breadcrumb :routes="routes" :active-title="options.defaultActive"></breadcrumb>
<router-view></router-view>
</template>
<script setup lang="ts">
import { computed } from "vue";
import { useRouter, useRoute } from "vue-router";
const route = useRoute();
const routes = computed(() => {
return route.matched;
});
</script>