1、创建组件 TreeMenu

<template><template v-for="item in menuTree" :key="item._id"><el-sub-menu v-if="item.children && item.children.length > 0" :key="item._id" :index="item.name"><template #title><el-icon><component class="icons" :is="item.meta.icon"></component></el-icon><!-- <component class="icons"  :is="item.icon" style="font-size: 5px; " width="20"></component> --><span>{{ item.meta.title }}</span></template><el-menu-item-group><tree-menu :menuTree="item.children" /></el-menu-item-group></el-sub-menu><!-- v-else-if="item.ismenu == 1"  --><el-menu-item v-else :index="item.name" @click="clickMenu(item)" style=""><el-icon><component class="icons" :is="item.meta.icon"></component></el-icon><!--  --><span>{{ item.meta.title }}</span></el-menu-item></template>
</template><script>
export default {name: 'TreeMenu',props: {menuTree: {type: Array,default: () => []}},methods: {//点击把菜单的名字传出去clickMenu(val) {// alert(1);this.$store.commit("pushtags", val)}}}
</script><style>.el-menu-item,.el-menu-item{width: 230px;
}</style>

2、conf.json 菜单数据

{"code": 1,"msg": "成功","time": 1683615337,"data": {"config": {"site_name": "real-tinke","beian": "备案","configgroup": [],"mail_type": "","mail_smtp_host": "q","mail_smtp_port": "","mail_smtp_user": "","mail_smtp_pass": "","mail_verify_type": "1","mail_from": "","": "备案2"},"menu": [{"id": 1,"pid": 0,"name": "/welcome","title": "控制台","remark": "","ismenu": 1,"createtime": 1491635035,"updatetime": 1652348263,"weigh": 9999,"status": "1","apipath": "dashboard\/index","icon": "user-filled","component": 0,"menuCode": 0,"spacer": "","childlist": []},{"id": 2,"pid": 0,"name": "general","title": "常规管理","remark": "","ismenu": 1,"createtime": 1491635035,"updatetime": 1491635035,"weigh": 0,"status": "1","apipath": "0","icon": "user-filled","component": 0,"menuCode": 0,"spacer": "","childlist": [{"id": 3,"pid": 2,"name": "config","title": "配置","remark": "","ismenu": 1,"createtime": 1491635035,"updatetime": 1491635035,"weigh": 0,"status": "1","apipath": "general\/Configs\/index","icon": "user-filled","component": 0,"menuCode": 0,"spacer": " ├","childlist": []},{"id": 7,"pid": 2,"name": "profile","title": "个人信息","remark": "","ismenu": 1,"createtime": 1491635035,"updatetime": 1491635035,"weigh": 0,"status": "1","apipath": "general\/profile\/index","icon": "user-filled","component": 0,"menuCode": 0,"spacer": " ├","childlist": []},{"id": 9,"pid": 2,"name": "database","title": "数据库列表","remark": "","ismenu": 1,"createtime": 1491635035,"updatetime": 1491635035,"weigh": 0,"status": "1","apipath": "general\/database\/index","icon": "user-filled","component": 0,"menuCode": 0,"spacer": " └","childlist": []}]} ],"getUserinfo": {"id": 1,"group_id": 1,"username": "admin","nickname": "极梦测试1","password": "8f72fa6ae8f467ec362d24c437b0fbef","salt": "ltcuEk","email": "admin@qq.com","mobile": "18354393242","avatar": "http:\/\/real-think.jmwl51.com\/storage\/upload\/20220511\/e9ccc0994c0bb8f40f4483304c3f6dc2.jpg","level": 1,"gender": 0,"birthday": "1996-02-01","bio": "","money": "0.00","score": 0,"successions": 1,"maxsuccessions": 5,"prevtime": 1652851903,"logintime": 1683614107,"loginip": "27.209.133.148","loginfailure": 0,"joinip": "47.103.65.214","jointime": 1631927605,"createtime": 1631927605,"updatetime": 1632638617,"token": "","status": "1","verification": "","group": {"id": 1,"name": "默认组","rules": "1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55","createtime": 1491635035,"updatetime": 1652824082,"status": "1"}}}
}

3、引用组件

<template><div class="basic-layout" style="display: flex;"><!-- , isCollapse ? 'fold' : 'unfold' --><el-aside :class="['nav']" ref="navmenuwin"><!-- 导航菜单 --><el-menu :default-active="activeMenu" class="nav-menu" :router="true" :show-timeout="3000" :collapse="isCollapse"><!-- 系统logo --><div class="logo"><img src="../assets/img/logo-small.png" /><span v-if="!isCollapse" style="display: block;width: 110px;white-space: nowrap;">{{ site.site_name }}</span></div><tree-menu :menuTree="menuTree" /></el-menu></el-aside><el-container class="content"><!-- 头部 --><el-header></el-header><!-- 内容 --><el-main></el-main></el-container></div>
</template><script>//   import confjson from "../cpmponets/framework/conf.json";
import confjson from "../components/framework/conf.json"; 
import TreeMenu from "../components/framework/TreeMenu.vue"; 
import { useRouter } from 'vue-router'
export default {name: "home",components: { TreeMenu, Topcrumb, confjson },data() {return {confjson,islogo: true,activeMenu: location.hash.slice(1),isCollapse: false,site: {},menuTree: [],userInfo: {},noticeCount: 0,isFullScreen: false,};},watch: {//监视路由,一开始就监视,获取routeName,来判断是否激活$route: {immediate: true,handler(val) {// this.routeName=val.nameconsole.log(val);this.activeMenu = val.name;}}},mounted() {this.getNoticeCount();this.getMenuList();const Router = useRouter()this.menuTree = Router.options.routes[0].children;console.log(this.menuTree)},methods: {toggleNav() {this.isCollapse = !this.isCollapse;},async getNoticeCount() {this.noticeCount = 5;},async getMenuList() {if (this.menuTree.length === 0) {try {const res = this.confjson.dataconsole.log(res, "1111")// const res = await this.$api.getMenuList(); this.userInfo = res.getUserinfo;// this.menuTree = res.menu; this.site = res.config;this.$store.commit("pushtags", "")// this.$store.commit('changeMenuList',res.data.menu)} catch (error) {console.error(error);}}},},
};
</script>

备注：可以加个判断；是网页还是vue内部路径