vue+elementui最简单的面包屑写法

1.创建一个面包屑组件

1.1.利用路由对象 matched 属性实现
matched：返回一个数组，包含当前路由的所有嵌套路径片段的路由记录 。
路由配置:

{path:'/welcom',name:'Welcom',component:()=>import('../src/views/admin/Welcom.vue'),meta:{title:'欢迎页',name1:'后台首页'}},
{path:'users',name:'UsersIndex',component:()=>import('../src/views/users/UsersIndex.vue'),meta:{title:'用户列表',name1:'用户管理'}},
{path:'users/create',name:'UserCreate',component:()=>import('../src/views/users/UserCreate.vue'),meta:{title:'用户创建',name1:'用户管理'}},

给路由添加了meta属性，这是关键

1.2在src目录或者components里新建一个Breadcrumb.vue文件（我这里是components下创建的），文件如下：

<template>
    <div class="myTitle">
        <div class="img">
            <!-- <img src="../../assets/LOOG.png" alt=""> -->
            <!-- LOOG -->
            <div class="breadcrumb">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/welcom' }">首页</el-breadcrumb-item>
                    //除首页外的以及目录
                    <el-breadcrumb-item :to="{path: breadList.path}">
                        {{breadList.meta.name1}}
                    </el-breadcrumb-item>
                    //二级目录
                    <el-breadcrumb-item :to="{path: breadList.path}">
                        {{breadList.meta.title}}
                    </el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            breadList: [] // 路由集合
        };
    },
    watch: {
        $route () {
            this.getBreadcrumb();
        }
    },
    created(){
         this.getBreadcrumb();
    },
    methods: {
        getBreadcrumb(){
            console.log(this.$route.matched[1],'this.$route.matched;');
            this.breadList = this.$route.matched[1]
        }
    }
}
</script>

<style lang="scss" scoped>
.myTitle {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
    .img {
        // margin-left: 110px;
    }
    .breadcrumb {
        display: flex;
    }
}
</style>

2.将组件导入主页文件

2.1引入组件

//引入面包屑组件
import BreadCrumb from "../../components/Breadcrumb.vue";

2.2 组件传值

components: {
      BreadCrumb,
    },

3.使用面包屑

<!-- 面包屑部分 -->
          <div class="breadCrumb">
            
              <bread-crumb></bread-crumb>
          </div>

4.效果图