navMenus 的动态路由 嵌套 1

<template>

  <div class="navMenu">

    <template v-for="menu in navMenus">

      <el-submenu

        :key="menu.path"

        :index="menu.path"

        v-if="menu.children.length > 0"

        class="mul-menu-item"

      >

        <template slot="title">

          <i

            style="font-size: 14px; margin-right: 12px"

            :class="menu.iconClass"

          ></i>

          <span slot="title">{{ menu.name }}</span>

        </template>

        <NavMenu :navMenus="menu.children"></NavMenu>

      </el-submenu>

      <el-menu-item

        :key="menu.path"

        v-else-if="menu.path == '/znjk'"

        @click="znjkOnclick('/znjk')"

      >

        <i

          style="font-size: 14px; margin-right: 12px"

          :class="menu.iconClass"

        ></i>

        <span slot="title">{{ menu.name }}</span>

      </el-menu-item>

      <!-- 特殊处理 -->

      <el-menu-item

        :key="menu.path"

        v-else-if="menu.path == '/static/page_data/jy-analysis.html'"

        @click="specialClick(menu.path)"

      >

        <i

          style="font-size: 14px; margin-right: 12px"

          :class="menu.iconClass"

        ></i>

        <span slot="title">{{ menu.name }}</span>

      </el-menu-item>

      <el-menu-item

        :key="menu.path"

        v-else-if="menu.path == '/static/page_data/yq-analysis.html'"

        @click="specialClick(menu.path)"

      >

        <i

          style="font-size: 14px; margin-right: 12px"

          :class="menu.iconClass"

        ></i>

        <span slot="title">{{ menu.name }}</span>

      </el-menu-item>

      <el-menu-item :key="menu.path" :index="menu.path" v-else>

        <i

          style="font-size: 14px; margin-right: 12px"

          :class="menu.iconClass"

        ></i>

        <span slot="title">{{ menu.name }}</span>

      </el-menu-item>

    </template>

  </div>

</template>

<script>

export default {

  name: "NavMenu",

  props: ["navMenus"],

  data() {

    return {};

  },

  methods: {

    znjkOnclick(name) {

      localStorage.setItem("gotoRouter", "znjk");

      let routeData = this.$router.resolve({

        //去掉开头防使用index做router的#符

        path: "/znjk".replace("#", "")

      });

      // window.open(routeData.href, "_blank");

      // 因为智能监控这个模块使用的是webrtc 所以要使用http

      window.open(

        "http://" + window.location.host + "" + routeData.href + "",

        "_blank"

      );

    },

    specialClick(valuePath) {

      localStorage.setItem("gotoRouter", "znjk");

      let routeData = this.$router.resolve({

        //去掉开头防使用index做router的#符

        path: valuePath.replace("#", "")

      });

      window.open(routeData.href, "_blank");

    }

  }

};

</script>

<style lang="stylus" scoped>

.navMenu .el-menu-item {

  background-color: #000c17;

}

.el-input, .el-textarea, .el-select {

  width: 50% !important;

}

>>>.el-menu {

  font-weight: bold;

  border-right: transparent !important;

}

>>> .el-menu {

  border-right: 1px solid transparent;

}

.el-submenu [class^='el-icon'], .el-menu-item [class^='el-icon'] {

  width: 14px;

  height: 12px;

  margin-right: 16px;

}

.el-submenu [class^='el-icon'], .el-menu-item [class^='el-icon'] {

  margin-right: 16px;

}

.el-submenu__title i {

  color: rgb(167, 177, 194);

}

.mul-menu-item :hover {

  color: #fff !important;

}

.el-menu-item i {

  color: rgb(167, 177, 194);

}

.mul-menu-item .el-menu-item, .mul-menu-item/deep/.el-submenu /deep/ .el-submenu__title {

  background-color: #000c17 !important;

  color: #fff;

}

.mul-menu-item .is-active {

  color: #fff !important;

  background-color: #2771fa !important;

}

.is-active {

  color: #fff !important;

  background-color: #2771fa !important;

}

.el-menu-item-group li.el-menu-item {

  background-color: #000c17 !important;

  padding-left: 75px !important;

  border: 1px solid #000;

}

</style>