witMenu 动态菜单组件

witMenu 是一个动态菜单组件，用于根据路由配置自动渲染菜单结构，支持嵌套菜单和动态组件加载。

用法实例

<template>
  <div class="app-menu">
    <!-- 根菜单 -->
    <witMenu v-for="route in routes" :key="route.path" :item="route" />
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'

const router = useRouter()
const routes = router.options.routes.filter(route => !route.meta?.hidden)
</script>

API

属性

属性名	类型	默认值	描述
item	[Object]	-	路由配置对象，必填项
layout	[String]	''	布局类型，用于控制菜单显示方式

插槽

插槽名	描述
无可用插槽	-

事件

事件名	描述	参数
无自定义事件	-	-

功能说明

1. 动态组件选择

• 根据路由配置自动选择渲染 witSubMenu 或 witMenuItem 组件
• 如果路由有子路由且子路由未被隐藏，则渲染为子菜单组件
• 否则渲染为菜单项组件

2. 嵌套菜单支持

• 支持无限层级的嵌套菜单
• 通过递归调用自身实现嵌套菜单渲染
• 自动处理子路由的显示与隐藏

3. 路由集成

• 与 Vue Router 深度集成
• 直接使用路由配置作为菜单数据来源
• 支持路由的 meta.hidden 属性控制菜单显示

4. 组件自动加载

• 使用 Vite 的 import.meta.glob 动态加载菜单组件
• 自动识别并注册 witSubMenu 和 witMenuItem 组件
• 支持组件的动态更新和热重载

TIP

1. 路由配置要求：

   • 菜单数据直接来源于路由配置
   • 支持 meta.hidden 属性控制菜单显示/隐藏
   • 嵌套菜单通过路由的 children 属性实现

2. 组件结构：

   • 组件需要与 witSubMenu 和 witMenuItem 组件配合使用
   • 这两个子组件需要放置在同一目录下

3. 布局支持：

   • 通过 layout 属性可以传递布局信息
   • 子组件可以根据布局信息调整显示样式

4. 性能优化：

   • 使用了 eager: true 选项进行组件预加载
   • 递归渲染时会自动过滤隐藏的子路由