cube/src/components/SideNav.vue

<template>
  <el-menu
    background-color="#304156"
    text-color="#BFCBD9"
    active-text-color="#ffffff"
    :default-active="activeIndex"
    class="nav"
    @open="handleMenuOpen"
    @close="handleMenuClose"
    :collapse="isCollapse"
  >
    <p class="logo">{{ routeSetting.name }}</p>
    <template v-for="r in routes">
      <el-menu-item
        :key="r.path"
        v-if="!r.children"
        :data-to="r.path"
        :data-name="r.name"
        :index="r.path"
        @click="handleToPage"
      >
        <i v-if="r.icon" :class="r.icon"></i>
        <span slot="title">{{ r.name }}</span>
      </el-menu-item>
      <el-submenu v-else :key="r.path" :index="r.path">
        <template slot="title">
          <i v-if="r.icon" :class="r.icon"></i>
          <span slot="title">{{ r.name }}</span>
        </template>
        <el-menu-item
          @click="handleToPage"
          :data-to="r.path + c.path"
          :data-name="c.name"
          :index="r.path + c.path"
          v-for="c in r.children"
          :key="r.path + c.path"
        >
          <i v-if="c.icon" :class="c.icon"></i>
          <span slot="title">{{ c.name }}</span>
        </el-menu-item>
      </el-submenu>
    </template>
  </el-menu>
</template>

<script>
import { routes, routeSetting } from "@/config/routes";
export default {
  name: "SideNav",
  data: () => {
    return {
      isCollapse: false,
      routes,
      routeSetting,
    };
  },
  methods: {
    handleMenuOpen() {
    },
    handleMenuClose() {
    },
    handleToPage(e) {
      const path = e.$el.getAttribute("data-to");
      //const name = e.$el.getAttribute("data-name");
      //this.$store.commit("addNavTag", { name: name, path: path });
      //console.log(path)
      if (path !== this.$route.path) {
        this.$router.push(path);
      }
    },
  },
  computed: {
    activeIndex() {
      return this.$route.path;
    },
  },
};
</script>

<style scoped>
.logo {
  text-align: center;
  color: #ffffff;
}
</style>