vue+element实现动态面包屑

1. vuex添加

2. CommonHeader.vue

<template>
  <el-breadcrumb
    separator="/"
  >
    <el-breadcrumb-item
      v-for="(item, index) in $store.state.breadcrumb"
      :key="index"
      :to="item.path"
    >
      <span style="color:#002C8D">{{ item.label }}</span>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

3. 在需要用到的页面引入CommonHeader.vue

<template>
  <div style="border-radius: 5px;height: 100%;position:relative">
    <div class="header">
      <CommonHeader />
    </div>
    <CommonTable />
  </div>
</template>
<script>
import CommonHeader from '../../../common-header/CommonHeader.vue';
import CommonTable from '../common/CommonTable.vue';

export default {
  name: 'MoreList',
  components: {
    CommonHeader,
    CommonTable,
  },
  data() {
    return {
      // path是路由 label是面包屑名字
      breadcrumb: [
        {
          path: '/',
          label: '首页',
        },
        {
          path: '/homeannouncement',
          label: '公告列表',
        },
      ],
    };
  },
  // 以下也应添加
  created() {
    this.$nextTick(() => {
      this.init();
    });
  },
  methods: {
    init() {
      this.$store.commit('changeBreadcrumb', this.breadcrumb);
    },
  },
};
</script>