面包屑导航 组件＜el-breadcrumb＞

<el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }"
                    >首页</el-breadcrumb-item
                >
                <el-breadcrumb-item>活动管理</el-breadcrumb-item>
                <el-breadcrumb-item>活动列表</el-breadcrumb-item>
                <el-breadcrumb-item>活动详情</el-breadcrumb-item>
            </el-breadcrumb>

面包屑实现

        先改造路由

       1.没有二级菜单

{
    path: "",
    component: Layout,
    children: [
      {
        path: "/layout",
        meta: {title: "后台首页"},
        component: ()=> import("@/views/layout/home/Home.vue")
      }
    ]
  },

2.有二级菜单

// 商品管理
  {
    path: "/goods",
    component: Layout,
    redirect: "/goods/goods-list",
    meta: {title: "商品管理"},
    children: [
      {
        path: "goods-list",
        meta: {title: "商品列表"},
        component: ()=> import("@/views/layout/goods/GoodsList.vue")
      },
      {
        path: "goods-add",
        meta: {title: "商品添加"},
        component: ()=> import("@/views/layout/goods/GoodsAdd.vue")
      },
      {
        path: "goods-type",
        meta: {title: "商品分类"},
        component: ()=> import("@/views/layout/goods/GoodsType.vue")
      }
    ]
  },

只要配置好了路由，在面包屑组件中 通过this.$route.matched 路由数组，这个数组中就会有我们需要的path和title

定义一个函数 处理路由对象，变成我们自己需要的数据格式

[ {path, title} ]

在生命周期created中调用计算面包屑的函数

使用侦听器，监听hash值的变化，重新调用计算面包屑函数

// 遍历路由对象 得到面包屑所需要的数据
        filterBread() {
            let newArr = [{ path: '/layout', title: '后台首页' }]
            // breadArr: [{ path: '/', title: '后台首页' }],
            this.$route.matched.forEach((item) => {
                // 判断一下 如果path是空的 就 不push
                if (item.path != '') {
                    newArr.push({
                        path: item.path,
                        title: item.meta.title,
                    })
                }
            })
            // 赋值
            this.breadArr = newArr
        },


// 侦听器
    watch: {
        '$route.path'() {
            // 监听到hash变化 调用函数重绘
            this.filterBread()
        },
    },