Vue动态菜单路由如何实现？

后端：java
前端：vue+elementui

后端返回的树形菜单，前端如何动态的现实菜单和路由

{
    "code": 200,
    "msg": "success",
    "data": [
        {
            "id": 999999999,
            "label": "功能菜单",
            "children": [
                {
                    "id": 100000000,
                    "label": "系统管理",
                    "children": [
                        {
                            "id": 100000100,
                            "label": "用户管理",
                            "children": []
                        },
                        {
                            "id": 100000200,
                            "label": "角色管理",
                            "children": []
                        }
                    ]
                }
            ]
        }
    ]
}

可以参考element ui 的导航菜单


或者参考http://t.csdn.cn/tvYc3

递归循环 动态创建 元素

img

参考 ：https://blog.csdn.net/weixin_45932460/article/details/126233833



<!--示例代码-->
<template>
  <div >
    <template>
  <div style="">
    <el-menu 
      background-color="#1f5f9a"
      text-color="#fff"
      active-text-color="#ffd04b">
      <template v-for="item in menuList">
        <!-- v-if条件渲染：如果出事渲染条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块 -->
        <!-- v-show:不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS的"display"属性进行切换 -->
        <!-- v-if 指令开销较大，所以更适合条件不经常改变的场景。而 v-show 指令适合条件频繁切换的场景 -->
        <!-- 包含子菜单的项 -->
        <el-submenu v-if="item.children.length" :index="item.id" :key="item.id">
          <template slot="title">
            {{ item.label}}
          </template>
          <el-menu-item
            v-for="(items, id) in item.children"
            :key="id"
            :index="items.id"
          >
            {{ items.label}}
          </el-menu-item>
        </el-submenu>
        <!-- 不包含子菜单的项 -->
        <el-menu-item v-else :index="item.id" :key="item.id">
          <template slot="title">
            {{ item.label }}
          </template>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>
  </div>
</template>
<script>
export default {
  data() {
    return {
      menuList: []
    };
  },
  created(){
    this.getMenuList();
  },
  mounted() {
 
  },
  methods: {
    getMenuList() {
        let res="你后台返回的数据"
        this.menuList=res.data[0].children
    }
  },
};
</script>