<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="index">
      {{ item }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
export default {
  name: 'Breadcrumb',
  computed: {
    breadcrumbs() {
      const route = this.$route
      const matched = route.matched.filter(item => item.meta && item.meta.title)
      const titles = matched.map(item => item.meta.title)
      // 如果当前路由有标题且不在matched中，添加它
      if (route.meta && route.meta.title && !titles.includes(route.meta.title)) {
        titles.push(route.meta.title)
      }
      return titles
    }
  }
}
</script>

<style lang="less" scoped>
.el-breadcrumb {
  font-size: 14px;
}
</style>
