二级导航栏加面包屑的实现

实现

<template>
  <div>
    <div class="twoNav">
      <!-- 二级导航菜单 -->
      <div class="left">
        <el-menu
          router
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          :active-text-color="activeTextColor"
          @select="handleSelect"
        >
          <el-menu-item
            v-for="el in routesArr"
            :key="el.name"
            :index="el.path"
          >
            {{ el.meta.title }}
          </el-menu-item>
        </el-menu>
      </div>
      <!-- 面包屑 -->
      <div class="rigth">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item
            v-for="item in breadList"
            :key="item.path"
            replace
            :to="item.path"
          >
            {{ item.meta.title }}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "TwoNav",
  props: {
    activeTextColor: {
      type: String,
      default: "#3160A8",
    },
  },
  data() {
    return {
      // 面包屑
      breadList: [],
      // 选中
      activeIndex: "0",
      // 二级导航菜单
      routesArr: [],
    };
  },
  watch: {
    $route: {
      handler: "getPath",
      immediate: true,
    },
  },
  created() {
    this.initBreadList();
    const route = this.routes();
    // 二级导航菜单
    this.routesArr = route;
    this.activeIndex = this.$route.path;
  },
  methods: {
    getPath() {
      this.initBreadList();
      this.activeIndex = this.$route.path;
    },

    // 初始化面包屑
    initBreadList() {
      this.breadList = this.$route.matched;
    },
    // 二级导航选中
    handleSelect(key) {
      this.activeIndex = key;
    },
    // 路由
    routes() {
      var routes = {
        children: this.$router.options.routes,
      };

      var route = this.$route.matched;

      for (var i = 0; i < route.length - 1; i++) {
        routes = routes.children.find((e) => e.name == route[i].name);
      }

      return routes.children;
    },
  },
};
</script>
<style lang="scss" scoped>
.twoNav {
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 48px 0;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(216, 216, 216, 1);
  .left {
    font-size: 24px;
  }
  .el-menu--horizontal > .el-menu-item {
    border-bottom: none;
    text-decoration: none;
  }
}
</style>

这里用到了两个重要的属性 ：

1. this.$route.matched （返回一个数组，包含当前路由的所有嵌套路径片段的路由记录) 如图:
   

会返回一个平铺结构的数组，那么拿到数据我们就可以操作了 直接循环面包屑就可。

2. this.$route.path (直接获取当前页面的url ) 如图：
   
   为什么要获取url呢？因为我把key的值设置的是路由的path路径，点击导航栏的时候要调用组件内置事件handleSelect 给activeIndex赋值实现高亮，当然我这里只是其中一种思路，肯定会有更好的实现思路的。

遇到的问题

因为切换路由的同时面包屑也要同步更新，我最初的方案是使用watch来监听，这个想法没错，但是刚开始监听的是activeIndex，这就导致了一个问题，第一次点击切换导航栏的时候面包屑是不同步更新的。

解决

监听整个$route路由，这样就完美解决了上面的问题。记录一下过程，如有更好的思路，欢迎随时交流。