tnbapp/src/views/admin/LeftAside.vue

<template>
  <el-menu
    :default-active="this.$route.path"
    router
    class="el-menu-vertical-demo"
    background-color="#334157"
    text-color="#fff"
    active-text-color="#ffd04b"
    :unique-opened="true"
    :collapse="collapsed"
    :collapse-transition="collapseTransition"
  >
    <div class="logobox">
      <a href="/background" style="text-decoration-line: none">
        <img class="logoimg" src="@/assets/img/icon/logo.png" alt="">
      </a>
    </div>
    <el-submenu index="/background/account">
      <template slot="title">
        <i class="el-icon-user" />
        <span>我的帐号</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/background/account/profile">
          <i class="el-icon-user" />
          <span slot="title">个人资料</span>
        </el-menu-item>
        <el-menu-item index="/background/account/record">
          <i class="el-icon-message" />
          <span slot="title">登入历史</span>
        </el-menu-item>
        <el-menu-item index="/background/account/oauth">
          <i class="el-icon-film" />
          <span slot="title">OAuth</span>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="/background/my">
      <template slot="title">
        <i class="el-icon-s-data" />
        <span>我的数据</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/background/my/album">
          <i class="el-icon-collection" />
          <span slot="title">播放列表</span>
        </el-menu-item>
        <el-menu-item index="/background/my/history">
          <i class="el-icon-s-data" />
          <span slot="title">历史记录</span>
        </el-menu-item>
        <el-menu-item index="/background/my/message">
          <i class="el-icon-message" />
          <span slot="title">我的消息</span>
        </el-menu-item>
        <el-menu-item index="/background/my/vip">
          <i class="el-icon-film" />
          <span slot="title">我的会员</span>
        </el-menu-item>
        <el-menu-item index="/background/my/wallet">
          <i class="el-icon-wallet" />
          <span slot="title">我的钱包</span>
        </el-menu-item>
        <el-menu-item index="/background/my/rcmd">
          <i class="el-icon-film" />
          <span slot="title">我的推荐</span>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="/background/post">
      <template slot="title">
        <i class="el-icon-film" />
        <span>我的稿件</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/background/post/video">
          <i class="el-icon-film" />
          <span slot="title">视频稿件</span>
        </el-menu-item>
        <el-menu-item index="/background/post/image">
          <i class="el-icon-picture" />
          <span slot="title">图片稿件</span>
        </el-menu-item>
        <el-menu-item index="/background/post/article">
          <i class="el-icon-picture" />
          <span slot="title">文章稿件</span>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-menu-item index="/background/4">
      <i class="el-icon-setting" />
      <span slot="title">导航四</span>
    </el-menu-item>
    <el-submenu index="/background/admin">
      <template slot="title">
        <i class="el-icon-files" />
        <span>后台管理</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/background/admin/user">
          <i class="el-icon-user" />
          <span slot="title">管理用户</span>
        </el-menu-item>
        <el-menu-item index="/background/admin/video">
          <i class="el-icon-film" />
          <span slot="title">管理视频</span>
        </el-menu-item>
        <el-menu-item index="/background/admin/avatar">
          <i class="el-icon-picture" />
          <span slot="title">用户头像</span>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="/background/backend">
      <template slot="title">
        <i class="el-icon-loading" />
        <span>后端系统</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/background/backend/gateway">
          <i class="el-icon-user" />
          <span slot="title">网关</span>
        </el-menu-item>
        <el-menu-item index="/background/backend/service">
          <i class="el-icon-user" />
          <span slot="title">服务</span>
        </el-menu-item>
        <el-menu-item index="/background/backend/access_log">
          <i class="el-icon-film" />
          <span slot="title">访问日志</span>
        </el-menu-item>
        <el-menu-item index="/background/backend/runtime_log">
          <i class="el-icon-film" />
          <span slot="title">运行日志</span>
        </el-menu-item>
        <el-menu-item index="/background/backend/realtime_log">
          <i class="el-icon-film" />
          <span slot="title">实时日志</span>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  name: 'LeftAside',
  data: function() {
    return {
      collapsed: true,
      collapseTransition: false
    }
  },
  created: function() { // 钩子函数
    this.$root.Bus.$on('Handle', value => {
      this.collapsed = value
    })
  },
  methods: {}
}
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 240px;
  min-height: 800px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  border: none;
  text-align: left;
}

.el-menu-item-group__title {
  padding: 0px;
}

.el-menu-bg {
  background-color: #1f2d3d !important;
}

.el-menu {
  border: none;
}

.logobox {
  height: 40px;
  line-height: 40px;
  color: #9d9d9d;
  font-size: 20px;
  text-align: center;
  padding: 20px 0px;
}

.logoimg {
  height: 40px;
}
</style>