element-ui多级菜单+面包屑导航 封装

根据文件结构 依次贴出代码好了 ，里面有请求的接口数据

header index.vue 这个文件是到航头 面包屑导航

<template>
  <div class="header">
    <div id="header-sidebar-open-close">
      <i
        :class="[
          getsidebar.opened ? 'el-icon-s-unfold' : 'el-icon-s-fold',
          'icon',
        ]"
        @click="toggleSideBar"
      ></i>
      <el-tag
        v-for="(tag, index) in crumbsList"
        :key="index"
        :class="isActive(tag) ? 'tagsd' : 'istag'"
        :closable="tag.title != '首页'"
        @click="routeTag(tag)"
        @close="delTag(tag, index)"
      >
        {{ tag.title }}
      </el-tag>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
export default {
  data() {
    return {};
  },
  created() {},
  methods: {
    // 切换菜单状态
    toggleSideBar() {
      this.$store.dispatch("ToggleSideBar");
    },
    // 添加样式
    isActive(tag) {
      return tag.name === this.$route.name;
    },
    // 点击标签跳转路由
    routeTag(tag) {
      this.$router.push(tag.pathname);
    },
    delTag(tag, index) {
      this.crumbsList.splice(this.crumbsList.indexOf(tag), 1);
      if (this.crumbsList.length == 1) {
        this.$router.push({ path: "/system/index" });
      }
      if (tag.name === this.$route.name) {
        this.$router.push({
          path: this.crumbsList[this.crumbsList.length - 1].pathname,
        });
      }
    },
  },
  computed: {
    ...mapGetters(["getsidebar", "getavatar"]),
    crumbsList() {
      return this.$store.state.sidebar.tagList;
    },
  },
};
</script>

<style scoped lang="scss">
/deep/.el-breadcrumb {
  line-height: 3px;
  margin-left: 6px;
}
/deep/.el-tag {
  margin-left: 10px;
  height: 28px;
  line-height: 28px;
  margin-top: 6px;
  cursor: pointer;
}
.header {
  width: 100%;
  background-color: #eaebec;
  height: 40px;
}
.icon {
  font-size: 30px;
  margin-top: 8px;
}
.avatar-container {
  height: 40px;
  display: fexd;
  position: absolute;
  right: 35px;
  margin-top: 10px;
}
.user-avatar {
  border-radius: 10px;
  cursor: pointer;
}
#header-sidebar-open-close {
  display: flex;
}
.istag {
  background: #fff;
  color: #17a2b8;
}
.tagsd {
  background: #17a2b8;
  color: #fff;
}
/deep/.el-tag .el-tag__close {
  color: #17a2b8;
}
</style>

sidebar index.vue

<template>
  <div>
    <el-menu
      :default-active="$route.path"
      :background-color="variables.menuBg"
      :text-color="variables.menuText"
      :active-text-color="variables.menuActiveText"
      mode="vertical"
      router
      :collapse="isCollapse"
      :unique-opened="true"
      :collapse-transition="true"
    >
      <sidebar-item :menu="getrouters" />
    </el-menu>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import SidebarItem from "./SidebarItem";
import variables from "@/styles/variables.scss";
import { getRoleMenuByUserId } from "@/http/sidebar.js";
export default {
  data() {
    return {
      getrouters: [],
    };
  },

  components: { SidebarItem },
  computed: {
    ...mapGetters(["getsidebar"]),
    isCollapse() {
      return !this.getsidebar.opened;
    },
    variables() {
      return variables;
    },
  },
  created() {
    getRoleMenuByUserId({ menuType: 0 }).then((res) => {
      res.data.data.meNuCodeList[0].childList.push({
        childList: null,
        createDate: "20200402",
        icon: null,
        menuCode: "Data-migration",
        menuName: "数据移植",
        menuType: "0",
        menuUrl: "/system/migration",
        orderNum: 1,
      });
      res.data.data.meNuCodeList.push({
        childList: [
          {
            createDate: "20200405",
            icon: null,
            menuCode: "investmentAccount",
            menuName: "理财产品",
            menuType: "0",
            menuUrl: "/account/investment",
            parentCode: "liabilityManager",
            perms: "financing:view",
          },
          {
            createDate: "20200405",
            icon: null,
            menuCode: "combinedAccount",
            menuName: "资产组合",
            menuType: "0",
            menuUrl: "/account/combined",
          },
        ],
        createDate: "20200404",
        icon: null,
        menuCode: "assetManagement",
        menuName: "资产管理",
        menuType: "0",
        menuUrl: "/account",
      });
      this.getrouters = res.data.data.meNuCodeList;
      console.log(this.getrouters, "sss");
    });
  },
};
</script>
<style></style>

sidebar SidebarItem.vue

<template>
  <div class="menu-wrapper">
    <template v-for="item in menu">
      <!-- 最后一级菜单 -->
      <el-menu-item
        v-if="!item.childList"
        :key="item.menuUrl"
        :index="item.menuUrl+''"
        @click="handleRouter(item)"
      >
        <i :class="item.icon"></i>
        <span slot="title">{{ item.menuName }}</span>
      </el-menu-item>
      <!-- 此菜单下还有子菜单 -->
      <el-submenu
        v-if="item.childList"
        :key="item.menuUrl"
        :index="item.menuUrl+''"
        @click="handleRouter(item)"
      >
        <template slot="title">
          <i :class="item.icon"></i>
          <span slot="title">{{ item.menuName }}</span>
        </template>
        <!-- 递归 -->
        <sidebar-item :menu="item.childList" />
      </el-submenu>
    </template>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  name: "SidebarItem",
  props: ["menu"],
  data() {
    return {};
  },
  methods: {
    ...mapMutations(["handleRouter"], "item")
  }
};
</script>

<style scoped>
.title {
  color: #fff;
}
</style>

接下来是store vuex 里面的个公共数据

app.js 这个是管点击图标 菜单切换伸缩状态

const app = {
  state: {
    sidebar: {
      opened: true,
    }
  },
  mutations: {
    //slider切换
    TOGGLE_SIDEBAR: state => {
      state.sidebar.opened = !state.sidebar.opened;
    }
  },
  getters: {
    getsidebar: state => state.sidebar
  },
  actions: {
    ToggleSideBar: ({
      commit
    }) => {
      commit("TOGGLE_SIDEBAR");
    }
  }
};
export default app;

sidebar.js 这个文件是点击菜单 添加到面包屑导航里面

const sidebar = {
  state: {
    tagList: [{
      name: "systemManager",
      pathname: "/system",
      title: "首页"
    }]
  },
  mutations: {
    handleRouter(state, item) {
      let obj = {
        title: item.menuName,
        name: item.menuCode,
        pathname: item.menuUrl
      };
      let index = state.tagList.findIndex(v => {
        return v.name == obj.name;
      });
      if (index == -1) {
        state.tagList.push(obj);
      }
      state.tagList = state.tagList.filter(item => {
        return item.pathname != "/system";
      });
      state.tagList.unshift({
        title: "首页",
        name: "systemManager",
        pathname: "/system",
      });
    },
    LogOut(state) {
      state.tagList = [{
        name: "layout",
        pathname: "/system/index",
        title: "首页"
      }]
    }
  }
};
export default sidebar;

store index.vue 这个文件就是把上边的两个文件引入这里

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);
import app from "./modules/app";
import sidebar from "./modules/sidebar";
export default new Vuex.Store({
  modules: {
    app,
    sidebar,
  }
});

好了 基本的封装就完事啦