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

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([router.currentRoute.value.name]);
// 刷新页面展开一级菜单
const ACTIVE_NAV: string[] = [];
NAV_MENU?.forEach((itm: any) => {
  itm.children?.find((item: { name: string }) => {
    return item.name == routerPathKey.value[0] && ACTIVE_NAV.push(itm.name);
  })
});


@import 'index.less';