vue配置文件自动生成路由和菜单实例代码

{  "name": "routerConfig",  "menu": [{    "id": "1", //路由id，不能重复    "name": "home",//路由名字    "path": "/homePage",//路由路径    "label": "首页",//菜单标题    "selected": true,//默认选中    "icon": "el-icon-monitor",//菜单显示图标    "open": true,//默认打开    "component": "homePage/homePage.vue",//组件路由    "children": [ //子菜单      {        "id": "3",        "name": "getCover",        "path": "/getCover",        "label": "封面截取",        "selected": false,        "icon": "el-icon-scissors",        "open": false,        "component": "getCover/getCover.vue",        "children": []      }    ]  },{    "id": "2",    "name": "testPage",    "path": "/testPage",    "label": "测试",    "selected": false,    "icon": "el-icon-setting",    "open": false,    "component": "test/test.vue",    "children": []  },{    "id": "5",    "name": "testMenu",    "path": "/testMenu",    "label": "菜单测试",    "selected": false,    "icon": "el-icon-setting",    "open": false,    "component": "testMenu/testMenu.vue",    "children": []  }]}

import Vue from 'vue'import VueRouter from 'vue-router'import ro from "element-ui/src/locale/lang/ro";Vue.use(VueRouter)//引入配置文件router.jsonlet routerMenu = require('@/config/router.json');routerMenu = routerMenu.menu;let menu = [];//配置路由let formatRoute = function (routerMenu,menu){  for(let i = 0; i < routerMenu.length; i++){    let temp = {      path: routerMenu[i].path,      name: routerMenu[i].name,      //这块要注意      //用require这种方式引入的时候，会将你的component分别打包成不同      //的js，加载的时候也是按需加载，只用访问这个路由网址时才会加载      //这个js      component: resolve => require([`@/views/${routerMenu[i].component}`], resolve)    };    menu.push(temp);    if(routerMenu[i].children && routerMenu[i].children.length > 0){    //递归生成子菜单的路由      formatRoute(routerMenu[i].children,menu);    }  }}//初始化formatRoute(routerMenu,menu);//重定向设置const routes = [  {    path: '/',    redirect: '/homePage'  },]//将生成的路由文件push进去for(let i = 0; i < menu.length; i++)  routes.push(menu[i]);  const router = new VueRouter({  routes})export default router

<template>  <div id="leftMenu">  </div></template><script>export default {  name: "left",  data(){    return{      menu:[]    }  },  methods:{  //通过路由id来找节点    findNodeById(node,id){      for(let i = 0; i < node.length; i++){        if(id == node[i].id){          node[i].selected = true;          if(node[i].children && node[i].children.length > 0){            this.findNodeById(node[i].children,id);          }          node[i].open = !node[i].open;          if(this.$route.path !== node[i].path) this.$router.push(node[i].path);        }else{          node[i].selected = false;          if(node[i].children && node[i].children.length > 0){            this.findNodeById(node[i].children,id);          }else{          }        }      }    },    //选中菜单节点    chooseNode(id){      this.findNodeById(this.menu,id);      let domTree = this.generatorMenu(this.menu,'',0)      let leftMenu = document.getElementById('leftMenu');      leftMenu.innerHTML = domTree;    },    //动态生成菜单目录    generatorMenu(menu,temp,floor){      for(let i = 0; i < menu.length; i++){        temp += `<div style="width: max-content">                    <div class="menuOption" οnclick="chooseNode(${menu[i].id})"                            style="text-indent: ${floor}em;                            background-color: ${menu[i].selected?'aquamarine':''};                            cursor: pointer;                            margin-top: 0.3rem;>                        <i class="${menu[i].icon}"></i>                        ${menu[i].label}`        if(!menu[i].open && menu[i].children && menu[i].children.length > 0){          temp += `<i style="margin-left: 1rem" class="el-icon-arrow-down"></i>`        }else{          if(menu[i].open && menu[i].children && menu[i].children.length > 0){            temp += `<i style="margin-left: 1rem" class="el-icon-arrow-up"></i>`          }        }        temp += `</div>`        if(menu[i].open && menu[i].children && menu[i].children.length != 0){          temp = this.generatorMenu(menu[i].children,temp,floor+1);        }        temp += `</div>`      }      return temp;    }  },  created() {  },  mounted() {    window.chooseNode = this.chooseNode;    let menu = [];    //获取路由菜单配置文件    const router = require('@/config/router.json');    menu = router.menu;    this.menu = menu;    let domTree = this.generatorMenu(menu,'',0)    let leftMenu = document.getElementById('leftMenu');    leftMenu.innerHTML = domTree;  }}</script><style scoped>  #leftMenu{    min-height: calc(100vh - 44px - 1rem);    background-color: cornflowerblue;    text-align: left;    padding: 0.5rem 1rem;    font-size: large;    font-weight: bold;  }  .selectedM{    background-color: aquamarine;  }  .menuOption{    cursor: pointer;  }</style>