vue项目封装element-ui面包屑实现动态路由

效果如下：

1. 新建一个bread.vue组件
   
2. 在bread.vue组件代码如下：

<template>
  <div class="bread">
    <div class="example-container">
      当前位置：
      <el-breadcrumb separator=">">
        <el-breadcrumb-item
          v-for="(item, index) in breadList"
          :key="index"
          //v-if="index<breadList.length-1"（有需要时候增加）
          :to="{ path: item.path }"
          >{{ item.meta.title }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      breadList: [], // 路由集合
    };
  },
  watch: {
    $route() {
      this.getBreadcrumb();
    },
  },
  methods: {
    isHome(route) {
      return route.name === "首页";
    },
    getBreadcrumb() {
      let matched = this.$route.matched;
      // 二级页面三个导航
      if (!this.isHome(matched[0])) {
        matched = [{ path: "/", meta: { title: "首页" } }].concat(matched);
      }
      if (matched[matched.length - 1].meta.title == "企业业绩详情") {
        matched = [
          { path: "/", meta: { title: "首页" } },
          { path: "/Results", meta: { title: "企业业绩" } },
        ].concat(matched[matched.length - 1]);
      }
      this.breadList = matched;
    },
  },
  created() {
    this.getBreadcrumb();
  },
};
</script>
<style scoped>
.bread /deep/ .el-breadcrumb {
  display: inline-block;
  display: inline-block;
  height: 48px;
  vertical-align: top;
  line-height: 48px;
}
.bread /deep/ .is-link {
  font-weight: normal;
}
.bread {
  float: left;
}
</style>

3. 在路由文件中增加路由与属性：代码如下：

import Vue from 'vue'引入Vue
import Router from 'vue-router'引入vue-router
import index from '@/components/index'

Vue.use(Router)

export default new Router({
 linkActiveClass: 'active',
 mode: '',
 routes: [												//配置路由，这里是个数组
   {													//每一个链接都是一个对象
     path: '/',											//链接路径
     name: 'index',										//路由名称
     component: index,									//对应的组件模板
     meta: {
       title: '首页'
     }
   },
   {
     path: '/Results',
     name: 'Results',
     component: () => import('@/components/results/Results'),//懒加载
     meta: {
       title: '企业业绩',//面包屑名称--二级导航
     },
   },
   {
     path: '/results/ResultsDetail',
     name: 'ResultsDetail',
     component: () => import('@/components/results/ResultsDetail'),
     meta: {
       title: '企业业绩详情',//面包屑名称--三级导航
     },
   },
 ],
})

4. 按需引入需要面包屑导航得组件、代码如下：

<template>
    <div>
   	   <bread></bread>
    </div>
</template>

import bread from "@/components/bread";
export default {
   name: "Results",
   components: {
       bread
   }
}