vue封裝面包屑的思路

1、打印this.$route

可以發現matched是可以提供面包屑的數據源，根據實際情況進行filter

2、在路由表（路由記錄）中添加 meta 

const routes = [
  // 第一級 
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      title: '首頁',
    },
    children: [
      // 第二級
      {
        path: 'manage',
        name: 'Manage',
        component: Manage,
        meta: {
          title: '活動管理',
        },
        children: [
          // 第三級
          {
            path: 'list',
            name: 'List',
            component: List,
            meta: {
              title: '活動列表',
            },
          },
          // 第三級
          {
            path: 'test',
            name: 'Test',
            component: Test,
            meta: {
              title: '測試',
            },
          },
        ],
      },
    ],
  },
];

3、在 BreadCrumb 組件中

獲取數據源：

  computed: {
    breadCrumbList() {
      return this.$route.matched;
    }
  },

渲染組件：

  <el-breadcrumb separator="/">
    <el-breadcrumb-item v-for="breadCrumbItem in breadCrumbList" :key="breadCrumbItem.path">
      {{ breadCrumbItem.meta.title }}
    </el-breadcrumb-item>
  </el-breadcrumb>

 

 

、