vue 从后台获取菜单数据，生成菜单

一、后端接口对接配置

1.

配置后台接口

2.

为使配置生效，在index中引入menu

二、前端vue菜单生成

1.创建菜单所在页面(HomeView.vue)，代码如下:

<template>
	<!-- 系统整体页面布局 -->
	<el-container class="el-container">
	  <!-- 页面头部区域 高度默认60px -->
	  <el-header class="el-header">
		<!-- 应用名称 -->
	      <span>废物回收中心</span>
	  </el-header>
	  <el-container>
	    <!-- 左侧菜单栏部分 -->
	    <el-aside class="el-aside">
			  <el-scrollbar>
				  <el-menu class="el-menu"
					   background-color="#32323a"
					   :unique-opened="true"
					   :default-active="$route.path"
					   text-color="#ffffff"
					   router>
				    <MenuTree :menuList="menuList"></MenuTree>
				  </el-menu>
			  </el-scrollbar>
	    </el-aside>
	    <!-- 右侧主题页面内容展示 -->
	    <el-main class="el-mian">
			  <!-- 路由页面 -->
			  <router-view></router-view>
	    </el-main>
	  </el-container>
	</el-container>
</template>
<script>
import MenuTree from '@/views/MenuTree.vue';
import { generateRoutes } from '@/utils/index';

export default {
  components: {
    MenuTree
  },
  data() {
    return {
      menuList: [
        {
            id:1,
            parentid:'0',
            name:'系统主页',
            icon:'HomeFilled',
            url:'/homepage',
          },
          {
            id:2,
            parentid:'0',
            name:'学生管理',
            icon:'UserFilled',
            children:[
                {
                    id:3,
                    parentid:'2',
                    name:'信息管理',
                    icon:'',
                    children:[
                        {
                            id:4,
                            parentid:'2',
                            name:'密码修改',
                            icon:'',
                            url:'/password'
                        }
                    ]
                },
                {
                    id:5,
                    parentid:'2',
                    name:'成绩管理',
                    icon:'',
                    url:'/grade',
                }
            ]
          },
          {
            id:6,
            parentid:'0',
            name:'课程管理',
            icon:'List',
            url:'/course',
          }
        ]
    }
  },
  mounted() {
      
    },
    methods: {
      
    }
}
</script>
<style>
/*铺满屏幕，没有边距*/
.el-container {
  padding: 0px;
  margin: 0px;
  height: 100wh;
}	
.el-header {
/* 顶部部分的高度(默认60px) */
  background-color: #0077d5;
  color: #FFFFFF;
  font-size: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
}
.el-aside {
  width: 200px;
  background-color: #32323a;
  min-height: calc(100vh - 60px);
}
.el-menu {
  min-height:100%;
}
.el-menu span {
  margin-left: 10px;
}
.el-mian {
  background-color: #eaedf1;
  padding: 0px;
  margin: 0px;
  height:calc(100vh - 60px);
}		
</style>

2.创建菜单页面（MenuTree.vue），代码如下：

<template>
    <div>
      <template v-for="(item) in menuList">
          <!-- 有次级菜单的,则展开子选项-->
          <el-sub-menu v-if="item.children && item.children.length>0" :key="item.menuId" :index="item.menuId">
            <template #title>
              <el-icon v-if="item.menuIcon!=''"><component :is="item.menuIcon" /></el-icon>
              <span :class="[item.menuPid ?'activespan':'disactivesapn']">{{item.menuName}}</span>
            </template>
            <!-- 递归,实现无限级展开 -->
            <MenuTree :menuList="item.children"></MenuTree>
          </el-sub-menu>
          <!-- 没有次级菜单的 -->
          <el-menu-item  v-if="!item.children" :key="item.menuId" :index="item.menuUrl">
              <el-icon v-if="item.menuIcon!=''"><component :is="item.menuIcon" /></el-icon>
              <span :class="[item.menuPid==0 ?'activespan':'disactivesapn']">{{item.menuName}}</span>
          </el-menu-item>
      </template>
    </div>
  </template>
  <script>
  import {
      HomeFilled,
      UserFilled,
      List
      } from "@element-plus/icons-vue";
  export default {
    props:{
        menuList:{
            type:Array,
            default(){
                return []
            }
        }
    },
    name: 'MenuTree',
    components: {
        HomeFilled,
        UserFilled,
        List
    },
    methods: {
    }
  }
  </script>
  <style scoped>
  .activespan{
      font-size: 15px !important;
  }
  .disactivesapn{
      margin-left: 20px;
      font-size: 15px !important;
  }
  /* 菜单栏选中后背景色 */
  .el-menu-item {
      color: #ffffff;
  } 
  .el-menu-item.is-active {
      color: #55aaff;
  }	
  </style>

三、对接菜单数据

调用后台接口，获取菜单数据，为前端菜单变量赋值，

调用位置（HomeView.vue）

备注：getMenu(后台数据接口)，toTree（数据格式转换）

mounted() {
      this.getMenu()
    },
    methods: {
      getMenu: function() { // 从后台获取菜单列表
        let _this = this;
        _this.loading = true;
        _this.$store
            .dispatch("getMenuList")
            .then(response => {
              _this.loading = false;
              let code = response.data.code;
              let results = response.data.data;
              if (code == 200) {
                _this.menuList = this.totree(results)
                _this.$store.commit('SET_MENULIST', results);
                //generateRoutes()
                //localStorage.setItem("menu",JSON.stringify(response.data.data));
              } else {
                _this.$router.push({
                  path: "/error",
                  query: { message: response.data.message }
                });
              }
            })
            .catch(() => {
              _this.loading = false;
            });

            //console.log(JSON.parse(localStorage.getItem("menu")))
            //self.menuList = JSON.parse(localStorage.getItem("menu"))
      },
      totree(data) {
        let map = {};
        let val = [];
        //生成数据对象集合
        data.forEach(it => {
          map[it.menuId] = it;
        })
        //生成结果集
        data.forEach(it => {
          const parent = map[it.menuPid];
          if (parent) {
            if (!Array.isArray(parent.children)) parent.children = [];
            parent.children.push(it);
          } else {
            val.push(it);
          }
        })
        return val;
      }
    }

四、前端路由配置

如此配置，保证打开的菜单，出现在右侧菜单位置,演示效果如下

总结：

本文只是粗浅用法，仅供参考。