Vue elementUI中的Breadcrumb面包屑

一、前言

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

二、组件使用

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属性为其元数据对象。