角色权限的设置

1.先在登录页把角色存起来

2.然后分成普通管理员路由和超级管理员路由的动态路由

3.在导航栏这边接收循环路由以及文字等

4.给路由加属性看是否展示在导航栏ismenu

5.在templat标签上面循环

<template>
  <div class="asders">
    <el-aside width="200px">
      <div class="boxbody">
        <div>源码外卖</div>
        <el-switch v-model="isCollapse" :active-value="true" :inactive-value="false"></el-switch>
      </div>

      <el-menu
        :collapse="isCollapse"
        router
        unique-opened
        :default-active="$router.path"
        class="el-menu-vertical-demo"
        background-color="rgba(220,38,38,0.2)"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
      这里拿一个隐藏标签在上面循环
        <template v-for="(v,i) in routers">
        这个是一级菜单循环，v-if判断你的子标签只有一个  就用一级路由
          <el-menu-item :index="v.path" :key="i" v-if="v.children.length<=1">
            <i class="el-icon-menu"></i>
            <span slot="title">{{v.meta.title}}</span>
          </el-menu-item>


     这是二级路由他的子标签  超过一个 就可以用  所以用 v-else
          <el-submenu :index="v.path" v-else>
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{{v.meta.title}}</span>
            </template>
            
            这个返回出来的  就是 v.children里面的路由
            <el-menu-item-group>
              <el-menu-item
              
              v.children要过滤不然全都显示  
                v-for="(v2,i2) in v.children.filter(v=>v.ismenu)"
                :key="i2"
                :index="v2.path"
              >{{v2.meta.title}}</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </template>
      </el-menu>
    </el-aside>
  </div>
</template>

<script>
import { showrouters } from "@/router/index";
export default {
  data() {
    return {
      isCollapse: false,
      routers: []
    };
  },
  methods: {
    change() {
      this.isCollapse = !this.isCollapse;
    },
    handleResize() {
      console.log(document.body.offsetWidth);
      if (document.body.offsetWidth <= 700) {
        this.isCollapse = true;
      } else {
        this.isCollapse = false;
      }
    }
  },
  created() {
    this.handleResize;
    window.addEventListener("resize", this.handleResize);
    this.routers = showrouters().filter(v => v.ismenu);
    console.log(this.routers);
  }
};
</script>

<style lang="scss" scoped>
.asders {
  height: 100%;
  background: url("../../assets/OIP-C.jpg") center, center/cover;
}
.el-menu {
  height: 100%;
  transition: all linear 0.3s;
}
.boxbody {
  height: 50px;
  display: flex;
  padding: 30px;
  align-items: center;

  background: url("../../assets/OIP-C.jpg") center center/cover;
  div {
    text-align: center;
    color: rgb(83, 50, 50);
    font-size: 18px;
    font-weight: bold;
  }
}
.el-aside {
  color: #333;
  text-align: center;
  line-height: 200px;
  height: 100%;
}
</style>