<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item v-for="item in tabs">{{item.meta.title}}</el-breadcrumb-item>
  </el-breadcrumb>
</template>
<script setup lang='ts'>
import { ref,watch,Ref} from 'vue'
import { useRoute,RouteLocationMatched } from 'vue-router';
//定义面包屑导航数据
const tabs :Ref<RouteLocationMatched[]> = ref([]);
const route = useRoute();
const getBredcurm = ()=>{
    //获取所有有meta和title
    let mached = route.matched.filter(item => item.meta && item.meta.title);
    //判断第一个是否是首页,如果不是，构造一个
    const first = mached[0];
    if(first && first.path !== '/licInformation'){
        //构造一个
        mached = [{path: '/licInformation',meta:{title:'首页'}} as any].concat(mached);
    }
    //设置面包屑导航数据
    tabs.value = mached;

}
getBredcurm();
//路由发生变化，重新获取面包屑导航数据
watch(()=>route.path,()=>getBredcurm());
</script>
