menu.vue 1.96 KB
<template>
  <div class="box">
    <el-menu
      :default-active="activemenu"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      @select="handleSelect"
    >
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span slot="title">首页</span>
        </template>
        <el-menu-item index="/trficcshow">
          <i class="el-icon-location"></i>交通展示
        </el-menu-item>
        <el-menu-item index="/behaviorshow">
          <i class="el-icon-location"></i>综治展示
        </el-menu-item>
      </el-submenu>
      <el-submenu  v-for="(fristmenu,index) in permission_routers" :index="fristmenu.path" :key="index">
        <template slot="title">
          <i :class="fristmenu.meta.icon"></i>
          <span slot="title">{{fristmenu.name}}</span>
        </template>
        <el-menu-item  v-for="(twomenu,index) in fristmenu.children" :key="index" :index="twomenu.path">
          <i :class="twomenu.meta.icon"></i>{{twomenu.name}}
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";

export default {
  data() {
    return {
      full: false,
      isCollapse: false,
      activemenu: "/",
      topbar:[]
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      this.$router.push(key);
      localStorage.setItem("curmenu", key);
      this.activemenu = key
    }
  },
  computed: {
    ...mapGetters(["permission_routers"])
  },
  created() {
    let activemenu = localStorage.getItem("curmenu");
    if (activemenu) {
      this.activemenu = activemenu;
      this.$router.push(activemenu);
    } else {
      this.$router.push('/');
      this.activemenu = '/';
    }
  },
  watch:{
    $route(t, f){
      let obj = {
        name:f.name,
        path:f.path,
        icon:f.meta.icon
      }
    this.$emit("setTopBar",obj)
    }
  }
};
</script>

<style lang="stylus" scoped>
.box{
  height 100%;
}
</style>