Vue3顶部面包屑

给路由添加meta属性

     {
                path: '/order',
                name: 'order',
                meta: {title: "订单管理"},
                component: () => import('../views/order/index.vue'),
            },

在header部分加入面包屑

<template>
  <div>
    <el-breadcrumb separator="/" class="breadcrumb">
      <el-breadcrumb-item v-for="v in lists" :key="v.path" >{{v.meta.title}}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>
<script setup>
import {onMounted, ref, watch} from 'vue';
import {useRouter,useRoute} from 'vue-router'
const route = useRoute();
const router = useRouter();
const lists = ref([]);
onMounted(()=>{
  console.log(route.matched)
  lists.value = route.matched
})
watch(route,(to,from)=>{
  getBreadcrumb(to.matched);
})
function getBreadcrumb(matched){
  lists.value=route.matched
}

</script>