vue 动态实现面包屑路由跳转

一 ，在路由表上加上name名

    path: "/dashboard",
    name: "首页",
    component: () => import("../views/dashboard.vue"),
    children: [
      {
        path: "/homepage/adv/pc",
        name: "homepage",
        component: () => import("../components/homepage/homepage.vue")
      },
      {
        path: "/order",
        name: "订单管理",
        component: () => import("../components/order.vue"),
        children: [
          {
            path: "orderInfo",
            name: "订单列表",
            component: () => import("../components/orderInfo.vue")
          }
        ]
      },

二 ，在组建中

  watch: {
    $route(to, from) {
      this.getBreadcrumb();
    }
  },

  mounted() {
    this.getBreadcrumb();
  },

    getBreadcrumb() {
      let matched = this.$route.matched.filter(item => item.name)  // this.$route.matched 可以获取到一个数组，包含当前路由的所有嵌套路径片段的路由记录
      const first = matched[0]
      if (first && first.name !== '首页') {
        matched = [{path: '/home', meta: { title: '首页' }}].concat(matched)
      }
      this.levelList = matched;
    }

三，通过element ui 框架循环出来，标签可以通过 to来实现跳转，不过我没有加。

    <el-breadcrumb separator="/">
      <el-breadcrumb-item v-for="(item, index) in levelList" :key="index">{{
        item.name
      }}</el-breadcrumb-item>
    </el-breadcrumb>