tjshop/shop/static/manager/src.b/components/Sidebar.vue

<template>
    <div class="sidebar">
        <el-menu :default-active="onRoutes" class="el-menu-vertical-demo" theme="dark" unique-opened router>
            <template v-for="item in items">
                <template v-if="item.subs">
                    <el-submenu :index="item.index">
                        <template slot="title">
                            <i :class="item.icon"></i>{{ item.title }}</template>
                        <el-menu-item v-for="(subItem,i) in item.subs" :key="i" :index="subItem.index">{{ subItem.title }}
                        </el-menu-item>
                    </el-submenu>
                </template>
                <template v-else>
                    <el-menu-item :index="item.index">
                        <i :class="item.icon"></i>{{ item.title }}
                    </el-menu-item>
                </template>
            </template>
        </el-menu>
    </div>
</template>

<script>
export default {
  data() {
    return {
      items: []
    }
  },
  methods: {
    getKey: function(id) {
      return 'key_' + id
    }
  },
  computed: {
    onRoutes() {
      return this.$route.path.replace('/', '')
    }
  },
  mounted: function() {
      var items   = []

      items.push({ icon: '', index: '/manageUser', title: '用户管理'})

      items.push({ icon: '', index: '/bannerManage', title: 'Banner管理'})

      items.push({ icon: '', index: '/doctorManage', title: '医生管理'})

      items.push({ icon: '', index: '/goodsManager', title: '商品管理'})
      items.push({ icon: '', index: '/sysLabelManager', title: '商品标签'})

      items.push({ icon: '', index: '/equipmentManage', title: '设备管理'})

      items.push({ icon: '', index: '/newsManager', title: '新闻管理'})
      items.push({ icon: '', index: '/newLabelManager', title: '新闻标签'})

      // items.push({ icon: '', index: '/sysConfig', title: '系统配置'})
      items.push({ icon: '', index: '/shopConfigAboutUsManage', title: '关于中心'})
      items.push({ icon: '', index: '/shopConfigContactUsManage', title: '联系我们'})
      items.push({ icon: '', index: '/shopConfigAddressManage', title: '地址定位'})

      items.push({ icon: '', index: '/faqManage', title: '常见问题'})
      items.push({ icon: '', index: '/exchangeCodeDetail', title: '兑换码查询'})
      this.items  = items
      for (var i in items){
          var item = items[i]
          if (item.index){
              this.$router.push(item.index)
              break;
          }else{
              if (item.subs){
                  for (var j in item.subs){
                      var c = item.subs[j]
                      if (c.index){
                        this.$router.push(inte.index)
                      }
                  }
              }
          }
      }
  }
}
</script>

<style scoped>
.sidebar {
  display: block;
  position: absolute;
  width: 250px;
  left: 0;
  top: 70px;
  bottom: 0;
  background: #2e363f;
}
.sidebar > ul {
  height: 100%;
}
</style>