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 :menuList="subchildren"></MenuTree> </el-menu>

子组件MenuTree：

<script setup> const props = defineProps(['menuList']) </script> <template> <template v-for="item in props.menuList" :key="item.id"> <!-- {{ item }} --> <!-- 分为两种方式渲染：有子菜单和没有子菜单--> <el-sub-menu :index="item.name" v-if="item.children.length !== 0"> <template #title> <span>{{ item.title }}</span> </template> <!-- 有子菜单的继续遍历（递归）--> <MenuTree :menuList="item.children"></MenuTree> </el-sub-menu> <!-- 没有子菜单--> <el-menu-item :index="item.name" v-else> <span>{{ item.title }}</span> </el-menu-item> </template> </template> <style lang="scss" scoped></style>