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>