vue3 breadcrumbs

<!--  -->
<template>
  <div class="breadcrumb-box bg-white px-10px">
    <a-breadcrumb>
      <a-breadcrumb-item v-for="(item, index) in routeBreadList" :key="item.path">
        <router-link :to="item.path === '' ? '/' : { path: item.path, query: item.query }">
          {
    
    {
    
     item.meta.title }}
        </router-link>
      </a-breadcrumb-item>
    </a-breadcrumb>
  </div>
</template>

<script lang='ts' setup>
import {
    
     reactive, toRefs, ref, onMounted, watch } from 'vue'
import {
    
     useRoute } from 'vue-router';

const route = useRoute()
const path = ref(route.path)
const routeQuery: any = reactive({
    
    })
const query = ref(route.query)
const routeBreadList: any = ref([])
onMounted(()=>{
    
    
  getBreadcrumb()
})
watch(route, () => {
    
    
  getBreadcrumb()
})
function getBreadcrumb() {
    
    
  routeBreadList.value = []
  path.value = route.path
  query.value = route.query
  const breadList: any[] = []
  // 最终展示的面包屑
  const routes: any[] = []
  route.matched.forEach(item => {
    
    
    if (item.meta.title) {
    
    
      // 过滤掉一层重复的菜单
      if (!routes.find(r => r.path === item.path)) {
    
    
        routes.push(item)
      }
    }
  })
  routes.forEach(item => {
    
    
    breadList.push(item)
    if (item.path === path.value && !isEmptyObject(query)) {
    
    
      routeQuery[item.path] = query
    }
  })

  // 将访问路径对应的 query 参数传递过去，刷新的时候用得到
  routeBreadList.value = breadList.map(item => {
    
    
    if (routeQuery[item.path]) {
    
    
      return {
    
    
        ...item,
        query: routeQuery[item.path]
      }
    }
    return item
  })
  console.log('routeBreadList', routeBreadList)
}

function isEmptyObject(value: any) {
    
    
  return Object.keys(value).length === 0
}

</script>
<style lang='scss' scoped >
.breadcrumb-box {
    
    }
</style>