vue3+element-plus 实现动态菜单和动态路由的渲染

目录的数据结构其中还包括二级目录import { useRoute, useRouter } from vue-router import MenuTree from ./components/MenuTree.vue const route useRoute() const router useRouter() const subchildren ref(目录数据) el-menu active-text-color#88733C background-color#e3ddd0 :default-active$route.path text-color#808080 router MenuTree :menuListsubchildren/MenuTree /el-menu子组件MenuTreescript setup const props defineProps([menuList]) /script template template v-foritem in props.menuList :keyitem.id !-- {{ item }} -- !-- 分为两种方式渲染有子菜单和没有子菜单-- el-sub-menu :indexitem.name v-ifitem.children.length ! 0 template #title span{{ item.title }}/span /template !-- 有子菜单的继续遍历递归-- MenuTree :menuListitem.children/MenuTree /el-sub-menu !-- 没有子菜单-- el-menu-item :indexitem.name v-else span{{ item.title }}/span /el-menu-item /template /template style langscss scoped/style