LiaoNingDangAn/src/views/index.vue

<template>
  <div class="container">
    <myHeader></myHeader>
    <div class="body-container">
      <div class="tree-menu">
        <router-link
          tag="div"
          :to="{ path: item.path }"
          v-for="(item, index) in myRouter"
          :key="index"
          active-class="routerActive"
        >
          <div class="view-child">
            <img :src="item.icon" alt="" class="router-icon"  />
            {{ item.name }}
          </div>
          <div></div>
        </router-link>
      </div>
      <div class="view-box">
        <tags-view ref="tagsView" />
        <div class="child-views">
          <router-view />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import myHeader from "@/components/myHeader";
import TagsView from "@/layout/components/TagsView";
import router from "@/router";
export default {
  components: { myHeader, TagsView },
  data() {
    return {
    };
  },
  computed: {
    //获取自定义路由
    myRouter() {
      console.log(this.$router.options.routes);
      console.log( this.$router.options.routes[5].children);
      // let staticRouter = router.options.routes.filter(
      //   (item) => item.isDiy == true
      // )[0].children;
      // return staticRouter;
      // return this.$store.state.myselfPermission.routerList;
      return this.$router.options.routes[5].children;
    },
  },
  created() {},
};
</script>

<style lang="scss" scoped>
.leftIcon {
  display: inline-block;
  height: 14px;
  width: 14px;
  margin-right: 10px;
}
::v-deep .el-submenu__title {
  padding: 0 8px !important;
}
::v-deep .el-menu-item {
  padding: 0 8px !important;
  margin-right: -1px;
}
::v-deep .el-menu-item-group .el-menu-item {
  padding-left: 35px !important;
}
::v-deep .el-menu-item-group__title {
  padding: 0 !important;
}
.container {
  height: 100%;
  .body-container {
    height: calc(100vh - 50px);
    display: flex;
    align-items: center;
    & > div {
      height: 100%;
    }
    .tree-menu {
      background: #465970;
      width: 220px;
      box-sizing: border-box;
      padding: 14px 10px;
      & > div {
        width: 200px;
        height: 40px;
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: 400;
        color: #ffffff;
        padding: 0 10px;
        cursor: pointer;
        .router-icon {
          display: inline-block;
          height: 14px;
          width: 14px;
          margin-right: 10px;
        }
      }
    }
    .view-box {
      flex: 1;
      height: 100%;
      background: #f2f2f2;

      overflow: hidden;
    }
    .child-views {
      height: calc(100% - 40px);
      width: 100%;
      box-sizing: border-box;
      padding: 10px;
    }
  }
  .routerActive {
    background: #1e80eb;
    border-radius: 4px;
  }
  .view-child {
    display: flex;
    align-items: center;
  }
}
</style>