思路:路由拆分
将路由信息整合在一起
拆分菜单组件
<el-menu class="el-menu-vertical-demo" router @select="sec" :collapse="false">
<menuItem v-for="items in menus" :item="items" :key="items.path"></menuItem>
</el-menu>
import menuItem from '../components/me.vue'
<!-- -->
<template>
<div id="side-bar-item">
<el-submenu v-if="item.children&&item.children.length > 0" :index="item.path" :key="item.path">
<template slot="title">
<i :class="item.icon"/>
<span slot="title">{{item.meta.title}}</span>
</template>
<div v-if="item.children&& item.children.length > 0">
<meunItem v-for="(innerMenu,index) in item.children" :item="innerMenu" :key="index"/>
</div>
</el-submenu>
<el-menu-item v-else :index="item.path" :key="item.path">
<i :class="item.icon"/>
<span slot="title">{{item.meta.title}}</span>
</el-menu-item>
</div>
</template>
<script>
import meunItem from '../components/me.vue'
export default {
props:['item'],
components: {
meunItem: () => import('../components/me.vue'),
},
}
</script>
<style scoped>
</style>
vue3+elementPlus
<el-menu
class="el-menu-vertical-demo"
:collapse="false"
>
<meunItem v-for="items in menulistI" :item="items" :key="items.path"></meunItem>
</el-menu>
import meunItem from '../components/me.vue'
import { Location } from '@element-plus/icons-vue'
const menulistI=reactive( [
{
path: 'userManage',
icon: Location,
meta:{ title:'用户管理'},
children: [
{
path: 'orderManages',
icon: Location,
meta:{ title:'用户管理'},
children:[ {
path: 'orderManages',
icon: Location,
meta:{ title:'用户管理'},
}]
}
]
},
{
path: 'orderManage',
icon: Location,
meta:{ title:'用户管理'},
},
])
<template>
<div>
<el-sub-menu v-if="item.children&&item.children.length > 0" :index="item.path" :key="item.path">
<template #title>
<component :is="item.icon"></component>
<span>{{item.meta.title}}</span>
</template>
<div v-if="item.children&& item.children.length > 0">
<meunItem v-for="(innerMenu,index) in item.children" :item="innerMenu" :key="index"/>
</div>
</el-sub-menu>
<el-menu-item v-else :index="item.path" :key="item">
<component :is="item.icon"></component>
<template #title>{{item.meta.title}}</template>
</el-menu-item>
</div>
</template>
<script setup lang='ts'>
import {
Location,
} from '@element-plus/icons-vue'
import meunItem from '../components/me.vue'
defineProps({
item: {
type: Object,
default:[]
}
}
</script>
<style scoped>
svg{
width: 25px;
}
</style>