一、前言

面包屑用于显示当前页面的路径，快速返回之前的任意页面。 例如：

二、组件使用

elementUI官网的实例十分简单，并没有配合路由来创建面包屑。 但是文档中发现Breadcrumb Item的属性中是有"to"属性的，所以可以通过给"to"属性赋值，来实现同ruter-link一样的效果，即点击单个面包屑项来实现路由跳转。 文件目录： 路由配置：

{
          
   
    path: /bread-crumb,
    name: BreadCrumb,
    component: ()=> import(../views/breadCrumb/Breadcrumb),
    meta: {
          
   
      title: 面包屑
    },
    children: [
      {
          
   
        path: child1,
        component: ()=> import(../views/breadCrumb/Child1),
        meta: {
          
   
          title: child1
        },
        children: [
          {
          
   
            path: child1-1,
            component: ()=> import(../views/breadCrumb/Child1-1),
            meta: {
          
   
              title: child1-1
            }
          }
        ]
      },
      {
          
   
        path: child2,
        component: ()=> import(../views/breadCrumb/Child2),
        meta: {
          
   
          title: child2
        }
      }
    ]
  }

这里使用了router的meta属性，为其设置名为title的属性，用来当作面包屑的展示名称，当然，也可以直接使用路由的name属性。 Breadcrumb.vue：

<template>
  <div class="bread-crumb">
    <el-breadcrumb separator="/">
<!-- 预设一个首面包屑 -->
      <el-breadcrumb-item
          :to="{ path: / }"
      >
        首页
      </el-breadcrumb-item>
<!--  循环遍历面包屑列表 -->
      <el-breadcrumb-item
          :to="{path: item.path}"
          v-for="(item, index) in breadList"
          :key="index"
      >
        {
          
   {
          
   item.meta.title}}
      </el-breadcrumb-item>
    </el-breadcrumb>

    <router-view></router-view>
  </div>
</template>

<script>
export default {
          
   
  name: "Breadcrumb",
  data(){
          
   
    return{
          
   
      breadList: []
    }
  },
  created() {
          
   
    this.getBreadcrumb();
  },
  watch: {
          
   
    $route() {
          
   
      this.getBreadcrumb()
    }
  },
  methods: {
          
   
    getBreadcrumb() {
          
   
      console.log(this.$route.matched)  //可以获取上下文路由 也就是可以获取父亲和孩子路由组成的数组
      if (Object.keys(this.$route.matched[0].meta).length > 0) {
          
   
        this.breadList = this.$route.matched
      } else {
          
   
        this.breadList = []
      }
    }

  },
}
</script>

<style scoped>

</style>

运行后，在地址栏输入（这里端口默认为8080）：

http://localhost:8080/#/bread-crumb/child1/child1-1

打开控制台，可以看到： 输出的this.$route.matched为包含3个元素的数组： this.$route.matched返回一个数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。 效果： 除了child1-1外，其他面包屑项都可以点击，跳转到对应的路径。

三、总结

vue-router和breadcrumb面包屑结合，实现展示当前路径下的路由信息。关键是利用route对象的matched属性，得到前匹配的路径中所包含的所有片段所对应的配置参数对象数组，然后遍历数组，并利用数组中对象的信息，展示到面包屑中。每个对象的path属性为其对应的路由路径，meta属性为其元数据对象。