Vue3+Elementplus实现面包屑功能

{
    path: "/home",
    name: "home",
    // 懒加载
    component: () => import("../views/home/index.vue"),
    meta: {
      title: "主页",
    },
    children: [
    {
	    path: "/recruitManage",
	    name: "recruitManage",
	    component: () => import("../views/home/childrens/RecruitManage.vue"),
	    meta: {
	      title: "招聘管理",
	      icon: Guide
	    },
	    children: [
	      {
	        path: "/noticeList",
	        name: "noticeList",
	        // 懒加载
	        component: () => import("../views/home/childrens/NoticeList.vue"),
	        meta: {
	          title: "公告管理"
	        },
	      },
	      {
	        path: "/postList",
	        name: "postList",
	        // 懒加载
	        component: () => import("../views/home/childrens/PostList.vue"),
	        meta: {
	          title: "职位管理",
	        },
	      },
	    ]
  	}
 }

 <!-- 面包屑（放到你想要放的template中的位置） -->
<el-breadcrumb separator=">">
     <!-- <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> -->
     <template v-for="(item, index) in breadList">
       <el-breadcrumb-item
         v-if="item.name"
         :key="index"
         :to="item.path"
       >{{ item.meta.title }}</el-breadcrumb-item>
     </template>
   </el-breadcrumb>

<script setup>
import { useRouter,useRoute } from 'vue-router';

let router = useRouter();
let route = useRoute();

let getMatched=()=>{
  console.log(route.matched);
  breadList.value = route.matched.filter(item => item.meta && item.meta.title);
}
onMounted(()=>{
  getMatched();
})

watch(() => route.path, (newValue, oldValue) => { //监听路由路径是否发生变化，之后更改面包屑
  breadList.value = route.matched.filter(item => item.meta && item.meta.title);
})

</script>

import { useRouter,useRoute } from 'vue-router';

let router = useRouter();
let route = useRoute();

let getMatched=()=>{
  console.log(route.matched); //打印路径数组
  breadList.value = route.matched.filter(item => item.meta && item.meta.title);
}

onMounted(()=>{
  getMatched();
})

watch(() => route.path, (newValue, oldValue) => { //监听路由路径是否发生变化，之后更改面包屑
  breadList.value = route.matched.filter(item => item.meta && item.meta.title);
})