vue2 element组件实现基本的面包屑功能

1.封装面包屑组件

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

</el-breadcrumb>
  </div>
</template>
<script>
export default {
  name: 'APP',
  data () {
    return {
    }
  },
  computed:{
    navData(){
      let matche =this.$route.matched;
      console.log('--MATCH',matche);
      matche[0].path='/home'
      return matche
    }
  

  },
  methods: {
  },
  created () {
  },
  mounted () {
    console.log(this.$route);
  },
}
</script>
<style lang="scss" scoped>

</style>

1. 通过设置 separator-class 可使用相应的 iconfont 作为分隔符，注意这将使 separator 设置失效

2.class是为了设置全局组件的样式

3.this.$router.mathced可以获取父级和自己的路由数组，

4.数组第一个路由为‘/’ 定义到home界面

二，配置路由元信息

const routes = [
  {
    path: "/",
    redirect: "login",
  },
  {
    path: "/login",
    name: "login",
    component: () => import("@/views/Login/login.vue"),
  },
  {
    path: "/layout",
    name: "layout",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import("@/views/Layout/layout.vue"),
    meta: {
      isLogin: true,
      title: "首页",
    },
    children: [
      {
        path: "/",
        redirect: "/home",
      },

      {
        path: "/home",
        name: "home",
        component: () => import("@/views//Home/Home.vue"),
        meta: {
          title: "首页",
        },
      },
      {
        path: "/goods",
        name: "goods",
        component: () => import("@/views/Goods/index.vue"),
        meta: {
          title: "产品管理",
        },
        redirect: "/goods/list",

        children: [
          {
            path: "list",
            name: "list",
            component: () => import("@/views/Goods/list/list.vue"),
            meta: {
              title: "商品列表",
            },
          },
          {
            path: "category",
            name: "category",
            component: () => import("@/views/Goods/category/category.vue"),
            meta: {
              title: "商品分类",
            },
          },
        ],
      },

      {
        path: "/advert",
        name: "advert",
        component: () => import("@/views/Advert/advert.vue"),
        redirect: "/advert/adlist",
        
        meta: {
          title: "广告管理",
        },
        children: [
          {
            path: "adlist",
            name: "adlist",
            component: () => import("@/views/Advert/advert/adlist.vue"),
            meta: {
              title: "广告列表",
            },
          },
        ],
      },

      {
        path: "/order",
        name: "order",
        component: () => import("@/views/Order/index.vue"),
        redirect: "/order/listed",
        meta: {
          title: "订单管理",
        },
        children: [
          {
            path: "auditing",
            name: "auditing",
            component: () => import("@/views/Order/auditing/auditing.vue"),
            meta: {
              title: "订单审核",
            },
          },
          {
            path: "collect",
            name: "collect",
            component: () => import("@/views/Order/collect/collect.vue"),
            meta: {
              title: "汇总清单",
            },
          },
          {
            path: "listed",
            name: "listed",
            component: () => import("@/views/Order/list/list.vue"),
            meta: {
              title: "订单列表",
            },
          },
        ],
      },

      {
        path: "/system",
        name: "system",
        component: () => import("@/views/system/index.vue"),
        redirect: "/system/role",
        meta: {
          title: "系统管理",
        },
        children: [
          {
            path: "department",
            name: "department",
            component: () => import("@/views/system/department/department.vue"),
            meta: {
              title: "部门管理",
            },
          },
          {
            path: "role",
            name: "role",
            component: () => import("@/views/system/role/role.vue"),
            meta: {
              title: "角色管理",
            },
          },
        ],
      },
    ],

3.将定义的组件全局注册到main.js中

4.在需要的页面使用就可以了