Ant Design Vue 4.0 侧边导航栏Menu组件封装

<template>
  <a-layout-sider class="menu-main">
    <div class="logo">Han</div>
    <a-menu
      v-model:selectedKeys="routerPathKey"
      theme="light"
      mode="inline"
      @click="onTitleClick"
      :openKeys="ACTIVE_NAV"
    >
      <template v-for="itm in NAV_MENU" :key="itm.name">
        <a-sub-menu
          v-if="itm.children && itm.children.length > 0"
          :key="itm.name"
        >
          <template #title>
            <icon-font :type="(itm.meta?.icon as any)" />
            <span>{{ itm.name }}</span>
          </template>
          <a-menu-item v-for="_itm in itm.children" :key="_itm.name">
            <icon-font :type="(_itm.meta?.icon as any)" />
            <span>{{ _itm.name }}</span>
          </a-menu-item>
        </a-sub-menu>
        <a-menu-item
          v-if="!itm.children || itm.children.length < 1"
          :key="itm.name"
        >
          <icon-font :type="(itm.meta?.icon as any)" />
          <span>{{ itm.name }}</span>
        </a-menu-item>
      </template>
      <a-menu-item key="敬请期待" disabled>
        <icon-font type="han-icon-jingqingqidai1" />
        <span>敬请期待</span>
      </a-menu-item>
    </a-menu>
  </a-layout-sider>
</template>
<script lang="ts" setup>
  import { ref } from "vue";
  import { useRouter } from "vue-router";
  const router = useRouter();

  // 阿里图标库
  import { createFromIconfontCN } from "@ant-design/icons-vue";
  const IconFont = createFromIconfontCN({
    scriptUrl: "/icon/nav-icon/iconfont.js",
  });
  // 路由表
  const NAV_MENU = router.options.routes[0].children;
  // 路由跳转
  const onTitleClick = (res: any) => {
    router.push({ name: res.key });
  };
  // 路由监控
  const routerPathKey = ref<Array<any>>([]);
  // 刷新页面展开一级菜单
  const ACTIVE_NAV = ref<string[]>([]);
  const initFN = () => {
    ACTIVE_NAV.value = [];
    routerPathKey.value = [router.currentRoute.value.name];
    NAV_MENU?.forEach((itm: any) => {
      itm.children?.find((item: { name: string }) => {
        return (
          item.name == routerPathKey.value[0] && ACTIVE_NAV.value.push(itm.name)
        );
      });
    });
  };
  initFN();
  router.afterEach((to, from) => {
    initFN();
  });
</script>
<style lang="less" scoped>
  @import "index.less";
</style>