precise_delivery_distribution_front/src/layout/components/AppSubMenu.vue

<template>
  <a-sub-menu class="nav-item" :key="menus.path">
    <template #title>
      <span
        ><component :is="menus.icon" /><span>{{ menus.meta.title }}</span></span
      >
    </template>
    <template v-for="child in menus.children">
      <template v-if="child.children">
        <app-sub-menu
          :menus="child"
          :parent-path="formatRoutes(child.path, parentPath)"
          :key="formatRoutes(child.path, parentPath)"
        />
      </template>
      <template v-else>
        <router-link
          :key="formatRoutes(child.path, parentPath)"
          :to="formatRoutes(child.path, parentPath)"
          custom
          v-slot="{ navigate }"
        >
          <a-menu-item>
            <p @click.stop="navigate">{{ child.meta.title }}</p>
          </a-menu-item>
        </router-link>
      </template>
    </template>
  </a-sub-menu>
</template>

<script lang="ts">
import { defineComponent } from "vue";

import { pathResolve } from "@/helper";
import {
  DesktopOutlined,
  PayCircleOutlined,
  ProjectOutlined,
} from "@ant-design/icons-vue";
const AppSubMenu = defineComponent({
  name: "AppSubMenu",
  components: {
    DesktopOutlined,
    PayCircleOutlined,
    ProjectOutlined,
  },
  props: {
    menus: {
      type: Object,
      default: () => [],
    },
    parentPath: String,
  },
  setup(props) {
    const formatRoutes = (path: string, base: string = "/") =>
      pathResolve(path, base);

    return {
      formatRoutes,
    };
  },
});

export default AppSubMenu;
</script>