vue中后台管理系统导航栏和侧边栏关联起来的写法

<template>
  <div class="myDiv">
    <el-container style="position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden">
      <el-header class="d-flex align-items-center" style="background-color:#545c64">
        <h5 class="text-light mb-0 mr-auto">UNI-ADMIN</h5>
        <el-menu
          :default-active="navArray.navBarIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item
            :index="index|numTostring"
            v-for="(item,index) in navArray.navList"
            :key="index"
          >{{item.name}}</el-menu-item>
          <el-submenu index="6">
            <template slot="title">
              <el-avatar
                size="small"
                src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
              ></el-avatar>summer
            </template>
            <el-menu-item index="6-1">修改</el-menu-item>
            <el-menu-item index="6-2">退出</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-header>
      <el-container style="height:100%">
        <el-aside width="200px">
          <el-menu
            :default-active="slideMenuActive"
            class="el-menu-vertical-demo"
            @select="asideeSelect"
            style="height:100%"
          >
            <el-menu-item
              :index="index|numTostring"
              v-for="(item,index) in slideMenus"
              :key="index"
            >
              <i :class="item.icon"></i>
              <span slot="title">{{item.name}}</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main style="position:relative">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item
              :to="{ path: item.path}"
              v-for="(item,index) in mianBao"
              :key="index"
            >{{item.title}}</el-breadcrumb-item>
          </el-breadcrumb>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import common from "../assets/js/common";
export default {
  mixins: [common],
  props: {},
  data() {
    return {
      navArray: {
        navBarIndex: "0",
        navList: [
          {
            name: "首页",
            subActive: "0",
            subMenu: [
              { icon: "el-icon-user", name: "后台首页", pathname: "index" },
              {
                icon: "el-icon-star-on",
                name: "相册管理",
                pathname: "index_imgAdmin"
              }
            ]
          },
          {
            name: "商品",
            subActive: "0",
            subMenu: [
              {
                icon: "el-icon-star-on",
                name: "商品列表2",
                pathname: "shop_goods_list"
              }
            ]
          },
          {
            name: "订单",
            subActive: "0",
            subMenu: [
              { icon: "el-icon-user", name: "后台首页3" },
              { icon: "el-icon-star-on", name: "商品列表3" }
            ]
          },
          {
            name: "会员",
            subActive: "0",
            subMenu: [
              { icon: "el-icon-user", name: "后台首页4" },
              { icon: "el-icon-star-on", name: "商品列表4" }
            ]
          },
          { name: "设置" }
        ]
      }
    };
    mianBao: [];
  },
  watch: {
    $route(to, from) {
      this.getRouterBran();
      localStorage.setItem(
        "navActive",
        JSON.stringify({
          top: this.navArray.navBarIndex,
          left: this.slideMenuActive
        })
      );
    }
  },
  computed: {
    slideMenus() {
      return this.navArray.navList[this.navArray.navBarIndex].subMenu || [];
    },

    slideMenuActive: {
      get() {
        return (
          this.navArray.navList[this.navArray.navBarIndex].subActive || "0"
        );
      },
      set(value) {
        this.navArray.navList[this.navArray.navBarIndex].subActive = value;
      }
    }
  },
  methods: {
    _initNavBar() {
      let r = localStorage.getItem("navActive");
      if (r) {
        r = JSON.parse(r);
        this.navArray.navBarIndex = r.top;
        this.slideMenuActive = r.left;
        console.log(r);
      }
    },
    handleSelect(key, keyPath) {
      if(key==="6-1"){
          return console.log(key)
      }
       if(key==="6-2"){
          return console.log(key)
      }
      this.navArray.navBarIndex = key;
      // 默认选中跳转到当前激活
      if (this.slideMenus.length > 0) {
        this.$router.push({
          name: this.slideMenus[this.slideMenuActive].pathname
        });
      }
    },
    asideeSelect(key, keyPath) {
      this.slideMenuActive = key;
      this.$router.push({ name: this.slideMenus[key].pathname });
    },
    // 获取面包屑导航
    getRouterBran() {
      let arr1 = this.$route.matched.filter(item => item.name);
      let arr2 = [];
      arr1.forEach((item, index) => {
        if (item.name === "index" || item.name === "layout") {
          return;
        } else {
          arr2.push({
            path: item.path,
            name: item.name,
            title: item.meta.title
          });
        }
      });
      if (arr2.length > 0) {
        arr2.unshift({
          path: "/index",
          name: "index",
          title: "后台首页"
        });
      }
      this.mianBao = arr2;
      console.log(this.mianBao);
    }
  },
  created() {
    this.getRouterBran();
    this._initNavBar();
  },
  mounted() {}
};
</script>
<style scoped>
.myDiv {
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
}
</style>