<template>
    <el-breadcrumb :separator-icon="ArrowRight" class="bread">
        <el-breadcrumb-item v-for="(item,index) in routers" :key="item.path" :to="item.path">
            <!-- {{ item?.meta?.title }} -->
            <span v-if="item.redirect === 'noredirect' || index === routers.length - 1">
                {{ item.meta.title }}
            </span>
            <!-- 如果没有重定向，使用 router-link 来跳转到对应路径 -->
            <router-link v-else :to="item.redirect ? (item.redirect as string) : (item.path as string)">
                {{ item.meta.title }}
            </router-link>
        </el-breadcrumb-item>
    </el-breadcrumb>
</template>

<script lang="ts" setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { computed } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
const routers = computed(() => {  //过滤掉没有meta得
    return router.currentRoute.value.matched.filter(item => item.meta.title)
})
</script>

<style>
/* .bread {
    margin-top: 8px;
} */
</style>