vue3使用el-breadcrumb开发面包屑导航组件

<template>
    <el-breadcrumb class="app-breadcrumb" separator="/">
        <el-breadcrumb-item v-for="item in levelList" :key="item.path" :to="item.path">
            {{ item.meta.title }}
        </el-breadcrumb-item>
    </el-breadcrumb>
</template>

<script>
import {toRefs, reactive, onMounted, watch} from "vue";
import { useRoute } from 'vue-router'
import { useStore } from "vuex";

export default {
  setup() {
      const route = useRoute()
      let store = useStore();
      const state = reactive({
          levelList: []
      })
      watch(route, () => {
          getBreadcrumb()
      })
      onMounted(() => {
          getBreadcrumb()
      })
      const getBreadcrumb = () => {
          let arr = store.state.roles.map(item => item.resName)
          console.log(arr, '用户权限信息')
          let matched = route.matched.filter(item => item.meta && item.meta.title)
          const first = matched[0]
          console.log(matched)
          if (first && first.name.trim().toLocaleLowerCase() !== 'Dashboard'.toLocaleLowerCase()) {
              matched = [{ path: '/dashboard', meta: { title: '系统首页' }}, ...matched]
          }
          state.levelList = matched
      }
      return {
        ...toRefs(state),
          getBreadcrumb,
      }
  }
}
</script>

<style lang="scss" scoped>
.app-breadcrumb {
    margin: 8px 0 8px 8px;
    display: inline-block;
    line-height: 30px;
    .no-redirect {
        color: #97a8be;
        cursor: text;
    }
    ::v-deep .el-breadcrumb__inner {
        font-weight: normal;
    }
    ::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner{
        font-weight: 700;
    }
}
</style>