
<template>
  <el-breadcrumb class="breadcrumb" separator="/">
    <el-breadcrumb-item v-for="(item,index) in breadcrumbList" :key="index" :to="{ path: item.path }">
      <span>{{item.title}}</span>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const breadcrumbList = computed(() => {
  const matched = route.matched.filter(record => record.meta?.title)
  
  return matched.map(record => {
    // 处理动态参数
    let title = record.meta.title
    if (typeof title === 'function') {
      title = title(route)
    }
    
    // 替换路径中的动态参数
    let path = record.path
    Object.keys(route.params).forEach(key => {
      path = path.replace(`:${key}`, route.params[key])
    })
    console.log('{ title, path }',{ title, path });
    
    return { title, path }
  })
})
</script>

<style lang="scss" scoped>
.breadcrumb {
  display: flex;
  align-items: center;
  font-size: 17px;
}
</style>