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" :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>