element ui Breadcrumb面包屑二次封装

效果图

---

面包屑二次封装代码

<template>
  <div class="breadcrumb-tip">
    <div class="flex-start">
      <span class="current-position">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item v-for="(item, index) in list" :key="index">
          <a @click.prevent="handleClick(item)">{{ item.text }}</a>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    handleClick(item) {
      if (item.to && item.to.name) {
        this.$router.push({
          name: item.to.name,
          params: {
            ...item.to.params,
          },
          query: {
            ...item.to.query,
          },
        });
      }
    },
  },
};
</script>
<style scoped>
.flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
</style>

main.js中全局注册组件

import Vue from "vue";
import Breadcrumb from "@/components/Page/Breadcrumb"
Vue.component("Breadcrumb", Breadcrumb);

单页面使用

<template>
  <div class="page">
    <Breadcrumb :list="list"/>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          text: "课程池管理",
          to: {
            name: "course-manage", //返回上个页面的路由
          },
        },
        {
          text: "教学团队管理",
        },
      ],
    };
  },
};
</script>