Ant Design Vue 4.0 侧边导航栏Menu组件封装 {callout color="#ee5a49"}Ant Design Vue 4.0 a-modal弹窗组件封装{/callout}<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>