element-ui 导航菜单 和 面包屑 联动

1. 导航菜单设置成router 模式

2. 面包屑组件监听路由变化

// Bread.vue
<template>
  <div class="bread-crumb-container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item v-for="item in currentRoute" :key="item.uid">
        {{item.name}}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
import { Breadcrumb, BreadcrumbItem } from "element-ui";

export default {
  name: "BreadCrumbContainer",

  data() {
    return {
      currentRoute: [],
    };
  },
  props: {},
  components: {
    [Breadcrumb.name]: Breadcrumb,
    [BreadcrumbItem.name]: BreadcrumbItem,
  },
  mounted() {},

  methods: {
    updateRoute(newRoute) {
      let currentRoute = [];
      let matched = newRoute.matched; // 获取当前路由的路径对象
      if (matched) {
        matched
          .filter((item) => item.name)
          .forEach((item) => {
            currentRoute.push({
              path: item.path,
              name: item.name,
            });
          }, []);
      }
      this.currentRoute = currentRoute;
    },
  },
  created() {
    let route = this.$route;
    this.updateRoute(route);
  },
  watch: {
    $route(newRoute) {
      this.updateRoute(newRoute);
    },
  },
};
</script>

3. 附动态导航菜单生成：

3.1 递归多层菜单子组件：

// 菜单外层组件：MenuList.vue

<template>
  <div class="aside-menu-list">
    <el-menu default-active="/" @open="handleOpen" @close="handleClose" router>
      <menu-item-temp :routerItems="routerList"></menu-item-temp>
    </el-menu>
  </div>
</template>

<script>
import { Menu } from "element-ui";
import MenuItemTemp from "@layout/components/MenuItemTemp";

export default {
  name: "MenuList",

  data() {
    return {
      routerList: [
        {
          path: "/code",
          name: "路由",
          icon: "el-icon-star-on",
          children: [
            {
              path: "/code/reg",
              name: "正则表达式",
              icon: "el-icon-guide",
              children: [
                {
                  path: "/code/reg",
                  name: "正则表达式",
                  icon: "el-icon-guide",
                },
              ],
            },
          ],
        },
        {
          path: "/settings",
          name: "设置",
          icon: "el-icon-tools",
          children: [
            {
              path: "/settings/users",
              name: "个人中心",
              icon: "el-icon-user",
            },
          ],
        },
      ],
    };
  },

  mounted() {},
  components: {
    [Menu.name]: Menu,
    MenuItemTemp,
  },

  methods: {
    handleOpen(index, indexPath) {
      console.log("open", index, indexPath);
    },
    handleClose() {},
  },

  
};
</script>

<style lang="less" scoped>
@import "~@style/modules/variables.less";

.aside-menu-list {
  /deep/ .el-menu {
    text-align: left;
    i {
      color: @cl-main;
      font-weight: bold;
    }
  }
}
</style>

3.2 递归多层菜单子组件：

// MenuItemTemp.vue

<template>
  <div class="menu-item-container">
    <template v-for="routerItem in routerItems">
      <template v-if="routerItem.children">
        <el-submenu
          :index="routerItem.path"
          :key="routerItem.uid"
          v-if="routerItem.name"
        >
          <template slot="title">
            <i :class="routerItem.icon"></i>
            <span>{{ routerItem.name }}</span>
          </template>
          <!-- 递归 -->
          <menu-item-temp
            :routerItems="routerItem.children"
            :parentRoute="routerItem.path"
          ></menu-item-temp>
        </el-submenu>
      </template>
      <template v-else>
        <el-menu-item
          :index="routerItem.path"
          :key="routerItem.uid"
          v-if="routerItem.name"
        >
          <i :class="routerItem.icon"></i>
          <span>{{ routerItem.name }}</span>
        </el-menu-item>
      </template>
    </template>
  </div>
</template>

<script>
import { Submenu, MenuItemGroup, MenuItem } from "element-ui";
export default {
  name: "MenuItemTemp",

  props: {
    routerItems: {
      type: [Array, null],
    },
  },

  components: {
    [Submenu.name]: Submenu,
    [MenuItemGroup.name]: MenuItemGroup,
    [MenuItem.name]: MenuItem,
  },
  data() {
    return {};
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="less" scoped>
@import "~@style/modules/variables.less";
.menu-item-container {
}
</style>