live-cms/src/layout/layout-part/menus.vue

<template>
  <div id="menus">
    <el-row>
      <el-col :span="24">
        <!-- <el-menu :default-active="$route.path" background-color="#353852" text-color="#ffffff" active-text-color="#409eff" router>
          <el-menu-item index="/">
            <i class="iconfont iconshouye"></i>
            <span slot="title">后台首页</span>
          </el-menu-item>
          <el-menu-item index="/user/index">
            <i class="iconfont iconyonghu"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
          <el-menu-item index="/role/index">
            <i class="iconfont iconquanxian"></i>
            <span slot="title">权限管理</span>
          </el-menu-item>
          <el-menu-item index="/live/index">
            <i class="iconfont iconzhibo"></i>
            <span slot="title">直播管理</span>
          </el-menu-item>
          <el-menu-item index="/room/index">
            <i class="iconfont iconfangjian"></i>
            <span slot="title">房间管理</span>
          </el-menu-item>
          <el-menu-item index="/stat/index">
            <i class="iconfont icontongji"></i>
            <span slot="title">统计管理</span>
          </el-menu-item>
        </el-menu> -->
        <el-menu background-color="#353852" text-color="#ffffff" active-text-color="#409eff">
          <template v-for="item in menu">
            <template>
              <el-menu-item :index="item.path" @click="selectMenu(item.path)" :key="item.name">
                <i v-if="item.icon" :class="item.icon"></i>
                <span v-if="item.name" slot="title">{{ item.name }}</span>
              </el-menu-item>
            </template>
          </template>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { index, user, role, live, room, stat } from '@/util/role_menu.js';
import * as menus from '@/util/role_menu.js';
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'menus',
  props: {},
  components: {},
  data: function() {
    return {
      menu: [],
    };
  },
  created() {
    this.search();
  },
  methods: {
    search() {
      this.menu.push(index, user, role, live, room, stat);
      return;
    },
    selectMenu(path) {
      this.$router.push({ path: path });
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  // watch: {
  //   user: {
  //     handler(val, oval) {
  //       if (val && !_.isEqual(val, oval)) this.search();
  //     },
  //     immediate: true,
  //   },
  // },
};
</script>

<style lang="less" scoped>
// .el-menu-vertical-demo:not(.el-menu--collapse) {
//   width: 200px;
//   min-height: 400px;
// }
/deep/.el-menu {
  border-right: none;
}
</style>