步骤1:首先是在router文件夹下面的index.js下

如果有二级菜单的路由，给一级菜单和二级菜单都要加meta

如果没有二级菜单路由，把一级菜单的path交给儿子，只给二级菜单添加meta

有二级菜单的路由，一级菜单需要重定向一下。

需要的数组 [{path,title},{path,title},{path,title}]

如果是一个一级菜单

 {
        path: '',
        component: Layout,
        children: [{
            path: '/shops',
            meta: {
                title: "店铺管理"
            },
            component: () =>
                import ('@/views/shops/Shops.vue')
        }]
    },

如果是一个二级菜单

 {
        path: '/goods',
        component: Layout,
        redirect: '/goods/goodslist',
        meta: {
            title: "商品管理"
        },
        children: [{
                path: 'goodslist',
                meta: {
                    title: "商品列表"
                },
                component: () =>
                    import ('@/views/goods/GoodsList.vue')
            },
            {
                path: 'goodsadd',
                meta: {
                    title: "商品添加"
                },
                component: () =>
                    import ('@/views/goods/GoodsAdd.vue')
            },
            {
                path: 'goodstype',
                meta: {
                    title: "商品分类"
                },
                component: () =>
                    import ('@/views/goods/GoodsType.vue')
            },
            {
                path: 'goodsedit',
                meta: {
                    title: "商品修改"
                },
                component: () =>
                    import ('@/views/goods/EditGoods.vue')
            },
        ]
    },

步骤2:计算路由

/ 先封装一个函数 处理面包屑导航的函数
            filterBread(){
                let arr = [{path: "/home",title: "后台首页"}];
                this.$route.matched.forEach(item => {
                    if( item.path != "" ){
                        // 不为空的时候才往数组中追加数据
                        arr.push({path: item.path,title: item.meta.title})
                    }
                });
                // 把处理后的数组 赋值给数据
                this.list = arr;
     },

初始化在created生命周期调用一下

// 调用计算面包屑的函数
this.filterBread();

在监听到hash变化的时候，还要计算一下面包屑导航

// 侦听器
        watch: {
            "$route.path"(){
                // 再一次调用计算面包屑的函数
                this.filterBread();
            }
        },

步骤3.渲染面包屑

 <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item v-for="(item,index) in list" :key="index" :to="{ path: item.path }">{{item.title}}</el-breadcrumb-item>
    </el-breadcrumb>