1、创建组件 TreeMenu
html
<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 菜单数据
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、引用组件
html
<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.name
console.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.data
console.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>