nuxt+element 侧边菜单栏

项目用的是nuxtjs  需要根据用户类型来显示侧边菜单栏

直接上代码了

navMenu.vue

<template>
  <div class="navMenu">
    <div v-for="(item,index) in navList" v-if="item.userType.indexOf(userType) > -1" :key="index" class="navMenu-item">
      <nuxt-link v-if="item.children === undefined" :to="item.path">
        <el-menu-item :index="item.path">
          <svg-icon v-if="item.icon" :icon-class="item.icon" />
          <span slot="title">{{ item.name }}</span>
        </el-menu-item>
      </nuxt-link>
      <el-submenu v-else-if="item.children !== undefined && item.children.length > 0" :index="item.path">
        <template slot="title">
          <nuxt-link slot="title" :to="item.path">
            <svg-icon v-if="item.icon" :icon-class="item.icon" />
            {{ item.name }}
          </nuxt-link>
        </template>
        <el-menu-item-group class="itemGroup">
          <navMenu :nav-list="item.children" :user-type="userType"></navMenu>
        </el-menu-item-group>
        
      </el-submenu>
    </div>
  </div>
</template>

<script>
export default {
  name: "NavMenu",
  props: {
    userType: {
      type: String,
      default: function() {
        return ""
      }
    },
    navList: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {}
  },
  created() {},
  methods: {}
}
</script>

sideBar.vue

    <el-menu
        :default-active="$route.path"
        :unique-opened="true"
        :router="true"
        :collapse="isCollapse"
        :collapse-transition="true"
        class="el-menu-sideBar"
        text-color="#fff"
        active-text-color="#fff"
      >
        <navMenu
          :nav-list="navList"
          :user-type="$store.state.userInfo.userType"
        ></navMenu>
        <--登录成功后讲后台返回的用户信息存进store 这里将获取到的userInfo.userType取出来进心过来 -->
      </el-menu>

navList格式应该是这样的

[
  {
    name: "用户管理",
    path: "/users",
    icon: "user",
    userType: ["0", "1"]
  },
  {
    name: "Topic管理",
    path: "/user/topic",
    icon: "topic",
    userType: ["1"]
  },
  {
    name: "生产者管理",
    path: "/user/producer",
    icon: "producer",
    userType: ["1"]
  },
  {
    name: "消费者管理",
    path: "/user/consumer",
    icon: "consume",
    userType: ["1"]
  },
  {
    name: "Group ID管理",
    path: "/user/groupId",
    icon: "group",
    userType: ["1"]
  },
  {
    name: "消息轨迹",
    path: "/user/message-track",
    icon: "track",
    userType: ["1"]
  },
  {
    name: "组件监控",
    path: "/admin/monitor/health",
    icon: "monitor",
    userType: ["0"]
    
  }
]