vue3+antdesginVue+ts解决导航菜单如何动态渲染antdesginVue自带的图标（icons-vue）以及导航菜单的刷新后继续锁定当前选中菜单问题 以及导航菜单动态生成问题

vue3+antdesginVue+ts解决导航菜单如何动态渲染antdesginVue自带的图标（icons-vue）以及导航菜单的刷新后继续锁定当前选中菜单问题 以及导航菜单动态生成问题

话不多说，先上效果图

main.ts

//带箭头的是重点
import { createApp, } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
import * as echarts from "echarts";

import * as Icons from '@ant-design/icons-vue'//<==============================
const app = createApp(App);
app.config.globalProperties.$echarts = echarts;
app.use(store).use(router).use(Antd).mount("#app");

Object.keys(Icons).map(key => {//<==============================
  app.component(key, Icons[key as keyof typeof Icons])
})

页面使用

重点代码后面用 <==================== 这箭头都做了标注哦

<template>
  <div class="siderBox">
    <a-menu v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys" mode="inline" @openChange="onOpenChange">
      <template v-for="item in menuList" :key="item.key">
        <template v-if="!item.children">
          <a-menu-item :key="item.key" @click="goPath(item)">
            <template #icon>
              <component :is="item.icon"></component>   <===================================
            </template>
            {{ item.name }}
          </a-menu-item>
        </template>
        <template v-else>
          <a-sub-menu :key="item.key">
            <template #icon>
              <component :is="item.icon"></component> <===================================
            </template>
            <template #title>
              {{ item.name }}
            </template>
            <template v-for="inItem in item.children">
              <!-- 二层没孩子的 -->
              <a-menu-item v-if="!inItem.children" :disabled="inItem.disabled" :key="inItem.key" @click="goPath(inItem)">
                {{ inItem.name }}
              </a-menu-item>
              <!-- 二层有孩子的 -->
              <a-sub-menu v-if="inItem.children" :key="inItem.key">
                <template #title>{{ inItem.name }}</template>
                <template v-for="inItemTwo in inItem.children">
                  <!-- 三层没孩子的 -->
                <a-menu-item v-if="!inItemTwo.children" :disabled="inItemTwo.disabled" :key="inItemTwo.key"
                  @click="goPath(inItemTwo)">{{ inItemTwo.name }}</a-menu-item>
                  <!-- 三层有孩子的 -->
                  <a-sub-menu v-if="inItemTwo.children" :key="inItemTwo.key">
                    <template #title>{{ inItemTwo.name }}</template>
                    <!-- <template v-for="inItemThree in inItemTwo.children"> -->
                    <!-- 四层没孩子的 -->
                    <!-- <a-menu-item v-if="!inItemThree.children" :disabled="inItemThree.disabled"  :key="inItemThree.key">
                {{inItemThree.name}}
        </a-menu-item>-->
                    <!-- </template> -->
                  </a-sub-menu>
                </template>
              </a-sub-menu>
            </template>
          </a-sub-menu>
        </template>
      </template>
    </a-menu>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import {
  PieChartOutlined,
  AppstoreOutlined,
  SettingOutlined,
} from "@ant-design/icons-vue";
const router = useRouter();
const selectedKeys = ref<any>(["1"]);
const openKeys = ref<any>([]);
const menuList: any = [
  {
    name: "首页",
    key: "1",
    path: "/home",
    icon: "PieChartOutlined",//<=======================
  },
  {
    name: "温度监测",
    key: "2",
    icon: "AppstoreOutlined",//<=======================
    children: [
      { name: "A库", path: "/coldStorageA", key: "2.1" },
      { name: "B库", path: "/coldStorageB", key: "2.2" },
      { name: "C库", path: "/coldStorageC", key: "2.3" },
      { name: "D库", path: "/coldStorageD", key: "2.4" },
      { name: "E库", path: "/coldStorageE", key: "2.5" },
    ],
  },
  {
    name: "预警",
    key: "3",
    icon: "SettingOutlined",//<=======================
    children: [
      { name: "预警范围", path: "/rangeSetting", key: "3.1" },
    ],
  },
];
function goPath(item: any) {
  sessionStorage.setItem("menuKey", item.key);
  router.push({ path: item.path });
}
const onOpenChange = (openKeys: any) => {
  sessionStorage.setItem("openKeys", openKeys);
};
onMounted(() => {
  let menuKey = sessionStorage.getItem("menuKey");
  let menuOpenKeys = sessionStorage.getItem("openKeys");
  if (menuKey) selectedKeys.value = [menuKey];
  if (menuOpenKeys) openKeys.value = menuOpenKeys.split(",");
});
</script>

这样就OK了