vue3+antd4实现左侧四级菜单栏-1

本篇记录左侧菜单栏的渲染，话不多说，直接上代码。

首先实现layout布局：一定要留意下四级菜单的循环渲染。其中只有一级、二级和四级的判断，没有三级的判断。如果有三级菜单的要求，在三级路由中加层判断即可。

    <a-layout-sider :trigger="null" collapsible class="layoutSide" width="240px">
      <div class="loginTitle">
        <div class="titleContent">BTMU</div>
      </div>
      <a-menu mode="inline"
      >
          <!-- 一级路由 -->
        <template v-for="item in menus">
          <a-sub-menu v-if="item.children && item.children.length > 0 && item.meta.showMenu" :key="item.name">
            <template #title>
              <span>{{ item.meta.title }}</span>
            </template>
              <!-- 二级路由 -->
              <template v-for="items in item.children">
                <!-- 只有二级路由 -->
                  <a-menu-item v-if="items.meta.showMenu" :key="items.name" @click="toPage(items)">
                    {{ items.meta.title }}
                  </a-menu-item>
                  <!-- 除了二级路由外，还有其他级的路由 -->
                  <template v-else>
                    <a-sub-menu :key="items.name">
                      <template #title>
                        <span>{{ items.meta.title }}</span>
                      </template>
                      <!-- 三级路由  -->
                      <template v-for="itemss in items.children">
                        <a-sub-menu v-if="itemss.meta.showMenu" :key="itemss.name">
                          <template #title>
                            <span>{{ itemss.meta.title }}</span>
                          </template>
                          <!-- 四级路由 -->
                          <template v-for="itemsss in itemss.children">
                            <a-menu-item v-if="itemsss.meta.showMenu" :key="itemsss.name" @click="toPage(itemsss)">
                                {{ itemsss.meta.title }}
                            </a-menu-item>
                          </template>
                        </a-sub-menu>
                      </template>
                  </a-sub-menu>
                </template>
              </template>
          </a-sub-menu>
          <a-menu-item v-else-if="!item.meta.showMenu" @click="toPage(item)" :key="item.name">
            {{ item.meta.title }}
          </a-menu-item>
        </template>
      </a-menu>
      </a-layout-sider>
    <a-layout class="layoutContent">
      <a-layout-header>
      </a-layout-header>
      <a-layout-content
        :style="{
          margin: '10px',
          padding: '20px',
          background: '#fff',
          minHeight: 'calc(100% - 160px)',
          overFlow: 'hidden',
          overflowY: 'auto',
          borderRadius: '10px'
        }"
      >
      <!-- 内容展示区 展示二级及多级路由的地方 -->
        <router-view></router-view>
      </a-layout-content>
    </a-layout>
  </a-layout>


ts：
<script setup lang="ts">
import { ref, reactive, watch } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import route from '@/router/index.ts'; // 引入的路由配置
  import { UserOutlined } from '@ant-design/icons-vue'
// console.log('RootRoute', route, route.options.routes);
let menus = reactive([])
Object.assign(menus, route.options.routes)
// console.log('menus', menus);

</script>

其次要留意router文件内的路由配置项，配置的属性和上述代码的循环和渲染有关系。

import { createRouter, createWebHistory } from 'vue-router'
import Layout from '@/components/layout/index.vue'
import webApplication from '@/views/assetDataMaintenance/itEquipment/safetyEquipment/webApplication/index.vue'


const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: Layout,
      redirect: '/itEquipment/safetyEquipment/webApplication',
      meta: {
        title: '1',
        showMenu: true  //  是否展示当前一级菜单
      },
      children: [
        {
          path: '/itEquipment',
          name: 'itEquipment',
          // component: webApplication,
          meta: {
            title: '1-1',
            showMenu: false
          },
          children: [{
            path: '/itEquipment/safetyEquipment',
            name: 'safetyEquipment',
            // component: webApplication,
            meta: {
              title: '1-1-1',
              showMenu: true
            },
            children: [{
              path: '/itEquipment/safetyEquipment/webApplication',
              name: 'webApplication',
              component: webApplication,
              meta: {
                title: '1-1-1-1',
                showMenu: true
              }
            },
            {
              path: '/itEquipment/safetyEquipment/logCollectionAnalysisSystem',
              name: 'logCollectionAnalysisSystem',
              component: () => import('@/views/assetDataMaintenance/itEquipment/safetyEquipment/logCollectionAnalysisSystem/index.vue'),
              meta: {
                title: '1-1-1-1',
                showMenu: true
              }
            }]
          }]
        }
      ]
    },
    {
      path: '/assetDataManagement',
      name: 'assetDataManagement',
      component: Layout,
      meta: {
        title: '2',
        showMenu: true
      },
      children: [
        {
          path: '/assetDataManagement/changeManagement',
          name: 'changeManagement',
          component: () => import('@/views/assetDataManagement/changeManagement/index.vue'),
          meta: {
            title: '2-1',
            showMenu: true
          }
        },
      ]
    },
    {
      path: '/ldap',
      name: 'ldap',
      component: Layout,
      meta: {
        title: '3',
        showMenu: false
      },
      children: [{
        path: '/ldap',
        name: 'ldap',
        component: () => import('@/views/ldap/index.vue'),
        meta: {
          title: '3-1',
          showMenu: true
        },
      }

      ]
    },
    {
      path: '/system',
      name: 'system',
      component: Layout,
      meta: {
        title: '4',
        showMenu: true
      },
      children: [{
        path: '/paramsModel',
        name: 'paramsModel',
        component: () => import('@/views/system/paramsModel/index.vue'),
        meta: {
          title: '4-1',
          showMenu: true
        },
      }

      ]
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('@/views/login/index.vue'),
      meta: {
        title: '登录',
        showMenu: true
      }
    },
    {
      path: '/404',
      name: 'errorPage',
      component: () => import('@/views/errorPage/index.vue'),
      meta: {
        title: '404',
        showMenu: true
      }
    }
  ]
})

export default router

菜单渲染一般用的是递归循环，本文用的是一层层进行判断的，不太友好，但也能实现。如果有能用递归的，麻烦指导下，感谢！

下一篇记录：使用递归思想去解决左侧菜单渲染vue3+antd4实现左侧多级菜单栏 递归渲染-CSDN博客。