arco design 递归式菜单

index.vue

<template>
  <a-menu
    :defaultOpenKeys="defaultOpenKeys"
    :defaultSelectedKeys="defaultSelectedKeys"
    :style="{ width: '100%' }"
    @menuItemClick="onClickMenuItem"
    @collapse="onCollapse"
    show-collapse-button
    breakpoint="xl"
  >
    <!-- {{ leftRouter }} -->
    <menus :DATA="leftRouter"></menus>
  </a-menu>
</template>
<script>
import { useRouter } from "vue-router";
import menus from "./menu.vue";
import { ref, defineComponent, provide } from "vue";
import { Message } from "@arco-design/web-vue";
import { useStore } from "@/store/index";
export default defineComponent({
  components: { menus },
  setup() {
    let leftRouter = ref([]);
    const store = useStore();
    let defaultSelectedKeys = ref([]); //默认选中
    let defaultOpenKeys = ref([]); //默认打开
    let router = useRouter();
    // leftRouter = store.rule[0].children //线上
    leftRouter = router.currentRoute.value.matched.length
      ? router.currentRoute.value.matched[0].children
      : []; // router.currentRoute.value.matched.children//获取当前路由下所有url
    defaultOpenKeys.value = [router.currentRoute.value.meta.parent];
    defaultSelectedKeys.value = [router.currentRoute.value.name];

    let onClickMenuItem = (key) => {
      Message.info({ content: `You select ${key}`, showIcon: true });
      defaultSelectedKeys.value = [key];
      router.push({ name: key });
    };

    const onCollapse = (val, type) => {
      const content = type === "responsive" ? "触发响应式收缩" : "点击触发收缩";
      Message.info({
        content,
        duration: 2000,
      });
    };
    return {
      leftRouter,
      router,
      onClickMenuItem,
      defaultOpenKeys,
      defaultSelectedKeys,
      onCollapse,
    };
  },
});
</script>
<style scoped>
.menu-demo {
  box-sizing: border-box;
  width: 100%;
  height: 600px;
  padding: 40px;
  background-color: var(--color-neutral-2);
}

</style>

menu.vue

<template>
  <div v-for="item in DATA" :key="item.name">
    <!-- 有下级 -->
    <a-sub-menu
      v-if="item.children && item.children.length > 0"
      :key="item.name"
    >
      <template #icon>
        <functional-icons :icon="item.icon" size="30" v-if="item.icon"></functional-icons>
        <div class="icon_demo" v-else></div>
      </template>
      <template #title>
        <span> {{item.meta.name}}</span>
      </template>
      <Menu :DATA="item.children" />
    </a-sub-menu>
    <!-- 没有下级 -->
    <a-menu-item v-else :key="item.name" v-show="item.meta.hidden != false">
      <template #icon>
        <functional-icons :icon="item.icon" size="30" v-if="item.icon"></functional-icons>
        <div class="icon_demo" v-else></div>
      </template>
      <span style="fontsize: 14px; paddingleft: 15px">{{ item.meta.name }}</span>
    </a-menu-item>
  </div>
</template>
<script>
import { inject, defineComponent } from "vue";
import FunctionalIcons from "../../components/FunctionalIcons.vue";
export default {
  components: {
    FunctionalIcons,
  },
  name: "Menu", //模板名称
  props: ["DATA"],
  setup() {
    // console.log(DATA);
    return {
      //   data,
    };
  },
};
</script>
<style lang="scss" scoped>
:deep(.arco-menu-icon) {
  font-size: 16px;
  margin-right: 5px !important;
}
.icon_demo{
  width: 16px;
  height: 17px;
}
</style>

router

 {
    path: "/",
    name: "home",
    component: HomeView,
    redirect: "/login",
    children: [
      {
        path: "/welcome",
        name: "welcome",
        component: () => import("@/views/welcome/index.vue"),
        icon: "robot",
        meta: { name: "欢迎", parent: "home", hidden: false },
      },
      {
        path: "/comprehensive",
        name: "comprehensive",
        component: () => import("@/views/welcome/index.vue"),
        icon: "robot",
        meta: { name: "页面1", parent: "home" },
        children: [
          {
            path: "/welcome",
            name: "welcome",
            component: () => import("@/views/welcome/index.vue"),
            icon: "robot",
            meta: { name: "欢迎", parent: "comprehensive" },
          },
        ],
      },
      {
        path: "/comprehensive1",
        name: "comprehensive1",
        component: () => import("@/views/login/login.vue"),
        icon: "robot",
        meta: { name: "页面2", parent: "comprehensive1" },
        children: [],
      },
      {
        path: "/comprehensive2",
        name: "comprehensive3",
        component: () => import("@/views/login/login.vuee"),
        icon: "robot",
        meta: { name: "页面3", parent: "comprehensive3" },
        children: [],
      },
      // {
      //   path: '/comprehensive2',
      //   name: 'comprehensive2',
      //   icon:'apps',
      //   component: () => import("@/views/comprehensive2.vue"),
      //   meta: { name: '综合展示2', parent: 'home' },
      // }
    ],
  },