Vue3无限递归菜单

创建Silderbar组件

<template>
  <el-menu
    :uniqueOpened="true"
    default-active="2"
    background-color="rgb(48, 65, 86)"
    text-color="#fff"
    active-text-color="#ffd04b"
  >
    <SilderbarMenu :route="routes" />
  </el-menu>
</template>

<script setup>
import { useRouter } from "vue-router";
import { computed } from "vue";
import { filterRoute } from "@/utils/route";

import SilderbarMenu from '@/components/Layouts/SilderBar/SilderbarMenu'
const router = useRouter();
const routes = computed(() => {
  const filter = filterRoute(router.getRoutes());
  return filter;
});

</script>

<style>
</style>

创建SilderbarMenu组件，用来循环递归

<template>
 <!-- 子集 menu 菜单 -->
    <template v-for="item in route" :key="item.path">
      <el-sub-menu :index="item.path" v-if="item.children && item.children.length > 0">
        <template #title>
          <span>{{ item.meta.title }}</span>
        </template>
       //如果存在了子级路由，那么就继续调用当前组件进行循环
        <SilderbarMenu    :route="item.children"/>
      </el-sub-menu>
      <el-menu-item :index="item.path" v-else :key="item.path">
        {{
          item.meta.title
        }}
      </el-menu-item>
    </template>

</template>

<script  setup>
import { defineProps } from 'vue'
const {route}=defineProps({
    route: {
        type: Object,
        required: true,
    }
})

</script>

<style>
</style>