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>