Vue element Breadcrumb 面包屑的使用

vue项目使用Breadcrumb面包屑可显示当前页面的路径，快速返回之前的任意页面。官方的demo很简单，并没有结合vue项目路由来创建面包屑。
路由配置找到roter/index.js 里面是你项目路由meta就是面包板显示的名字,菜单是这种json结构，不要复制，不要复制，不要复制，以自己项目为准。

{
    path: '/xxxxxx',
    name: 'xxxxxx',
    component: ()=> import('../views/xxxxxx/xxxxxx'),
    meta: {
      title: '面包屑1'
    },
    children: [
      {
        path: 'child1',
        component: ()=> import('../views/xxxxxx/Child1'),
        meta: {
          title: '面包屑11'
        },
        children: [
          {
            path: 'child1-1',
            component: ()=> import('../views/xxxxxx/xxxxx'),
            meta: {
              title: '面包屑111'
            }
          }
        ]
      }
    ]
  }

下面我对该控件进行了封装做了一些调整（以我自己的项目为例的），结合自己的项目情况，自行调整
效果图

创建Breadcrumb .vue作为组件，Copy下面代码,在需要使用面包板的页面引用这个组件即可

<template>
    <div class="bread">
        <div v-for="(item, index) in breadList"  
                :key="index">
            <el-row :gutter="24" style="margin:auto;" v-if="digestParams(item.meta.title, $route.params)!='主页'">
                <el-col :xs="3" :sm="2" :md="2" :lg="2" :xl="18">
                <el-image
                    style="width: 10px; height: 14px;vertical-align:middle;cursor:pointer"
                    :src="require('../../../assets/return.png')"
                    @click="home"
                    fit="fit"></el-image>
                </el-col>
                <el-col  :xs="18" :sm="20" :md="20" :lg="20" :xl="20">
                <div :to="{ path: getPath(item.path) }">
                    {{ digestParams(item.meta.title, $route.params) }}
                </div>
                </el-col>
                <el-col  :xs="3" :sm="2" :md="2" :lg="2" :xl="2">
                <el-image
                    style="width: 19px; height: 16px;vertical-align:middle;cursor:pointer"
                    :src="require('../../../assets/door.png')"
                    @click="home"
                    fit="fit"></el-image>
                </el-col>
            </el-row>
            <el-row :gutter="24" style="margin:auto;" v-else>
                <el-col  :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <div :to="{ path: getPath(item.path) }">
                    {{ digestParams(item.meta.title, $route.params) }}
                </div>
                </el-col>
            </el-row>
        </div>
        
    </div>
</template>

<script>
export default {
    name: 'BreadcrumbNav',
    data: function() {
        return {
            breadList: [],
        };
    },
    mounted: function() {
        this.getBreadList(this.$route);
    },
    watch: {
        $route(val) {
            this.getBreadList(val);
        },
    },
    methods: {
        home(){
        console.log('你的操作')
      },
        getBreadList(val) {
            if (val.matched) {
                let matched = val.matched.filter(item => item.meta && item.meta.title);
                this.breadList = matched;
            }
        },
        getPath(path) {
            if (path === '') {
                return '/';
            }
            return this.digestParams(path, this.$route.params);
        },
        digestParams(breadcrumbName, params) {
            if (!breadcrumbName) {
                return null;
            }
            var paramsKeys = Object.keys(params).join('|');
            return breadcrumbName.replace(new RegExp(':('.concat(paramsKeys, ')'), 'g'), function(
                replacement,
                key
            ) {
                return params[key] || replacement;
            });
        },
    },
};
</script>
<style lang="less" scoped>
.el-breadcrumb {
    line-height: 30px !important;
}
.bread {
    background-color: #dfdfdf !important;
    text-align: center;
    line-height: 30px;
    font-weight: bold;
    font-size: 16px;
}
</style>