Vue+elementUI实现面包屑导航

引入Element不阐述

1.在路由表中按需添加多层嵌套关系 使用children进行添加嵌套路由 meta添加元数据

const routes = [{
    path: '/',
    name: 'Layout',
    component: () => import('../views/Layout.vue'),
    children: [{
        path: '',
        name: 'Echarts',
        component: () => import('../views/Echarts.vue'),
        // 元数据
        meta: {
          title: "第一层嵌套"
        }
        children[{
            path: '',
            name: 'Echarts',
            component: () => import('../views/Echarts.vue'),
            // 元数据
            meta: {
              title: "第二层嵌套"
            }
        }]
    }]
}]

2.在面包屑组件中使用

<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item
            v-for="item in list"
            :key="item.path"
            :to="item.path"
            >{{ item.meta.title }}</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</template>



// 可以在mounted里打印当前路由信息查看 一目了然
mounted() {
    console.log(this.$route);
}

// 使用计算属性把当前路由信息中需要的数据返回 然后使用v-for进行循环遍历
computed: {
    list() {
      return this.$route.matched;
    },
  },