动态路由与菜单生成系统

目录

1. 简介
2. 项目架构概览
3. 动态路由系统
4. 菜单生成机制
5. 路由配置与映射
6. 性能优化策略
7. 微前端集成
8. 故障排除指南
9. 总结

简介

本系统是一个基于Vue 3和TypeScript构建的现代化前端应用，采用动态路由与智能菜单生成机制。通过import.meta.glob实现组件的自动扫描与懒加载，结合脚本自动生成菜单配置，实现了高度可扩展的微前端架构。

系统的核心特点包括：

• 基于文件系统的自动路由发现
• 智能菜单生成与配置管理
• 组件级别的懒加载优化
• 微前端架构支持
• 实时菜单更新机制

项目架构概览

图表来源

• src/router.ts
• script/generateMenu.js
• src/App.vue

动态路由系统

路由自动发现机制

系统通过import.meta.glob实现组件的自动扫描与路由注册：

const widgetsMap: any = import.meta.glob('./widgets/*/*.vue', {
  eager: true,
  import: 'default',
})
const widgetsTsxMap: any = import.meta.glob('./widgets/*/Views/*.tsx', {
  eager: true,
  import: 'default',
})

这种机制的优势：

• 零配置路由：无需手动维护路由表
• 自动发现：新组件自动加入路由系统
• 类型安全：TypeScript提供完整的类型推断
• 性能优化：支持按需加载和代码分割

路由解析流程

图表来源

• src/router.ts
• script/generateMenu.js

路由配置结构

每个路由包含以下核心字段：

interface RouteConfig {
  path: string        // 路由路径
  name: string        // 菜单名称
  component: any      // 组件实例
  icon: string       // 图标标识
  meta: {           // 元数据
    widgetName: string // 组件名称
  }
}

章节来源

• src/router.ts

菜单生成机制

自动菜单生成流程

菜单生成器通过解析组件的index.ts文件来自动创建菜单配置：

// 解析AST获取canvasView配置
const ast = parser.parse(file, {
  sourceType: 'module',
  plugins: ['typescript'],
})

// 提取菜单配置信息
properties.forEach((prop) => {
  if (prop.key.name === 'canvasView') {
    // 处理canvasView配置
  }
  if (prop.key.name === 'name') {
    row.name = prop.value.value
  }
  if (prop.key.name === 'icon') {
    row.icon = prop.value.name
  }
})

菜单配置结构

图表来源

• src/config/menu.ts

菜单字段详解

字段名	类型	作用	示例
name	string	菜单显示名称	"追溯报表"
icon	string	图标标识	"t1"
patchName	string	组件唯一标识	"TraceManagement"
path	string	路由路径	"/information-base/TraceManagement"
notPage	boolean	是否为页面组件	false

章节来源

• script/generateMenu.js
• src/config/menu.ts

路由配置与映射

文件系统映射关系

系统通过严格的文件结构约定实现路由与菜单的自动映射：

src/widgets/
├── TraceManagement/
│   ├── index.ts          # 菜单配置入口
│   ├── Views/
│   │   └── TraceManagement.tsx
│   └── Settings/
│       └── TraceManagement.settings.tsx
├── SystemManagement/
│   ├── index.ts
│   ├── Views/
│   │   └── SystemManagement.vue
│   └── ...
└── ...

路由匹配规则

图表来源

• src/router.ts
• script/generateMenu.js

嵌套路由配置

系统支持复杂的嵌套路由结构，通过provider函数实现组件包装：

export function provider(
  Widget: Component,
  data: boolean | Component = false,
  isFullyCover: boolean = false,
  defaultConfig: Record<string, any> = {}
) {
  return (arg: any) => {
    return h(Provider, {
      widgetProps: arg,
      widgetName: Widget.name,
      isFullyCover,
      isWidget,
      defaultConfig,
      NestedComponents,
    }, {
      default: h(Widget, props)
    })
  }
}

章节来源

• src/router.ts
• src/provider/index.ts

性能优化策略

预加载策略

系统采用多种策略优化路由加载性能：

1. Eager加载：在构建时预加载关键组件
2. Lazy加载：按需加载非关键组件
3. 缓存机制：利用浏览器缓存减少重复加载

// Eager加载配置
const widgetsMap: any = import.meta.glob('./widgets/*/*.vue', {
  eager: true,
  import: 'default',
})

// Lazy加载配置
const lazyComponent = () => import('./LazyComponent.vue')

内存优化

缓存机制

系统实现了多层次的缓存机制：

• 组件缓存：已加载组件保持在内存中
• 路由缓存：路由配置缓存在全局状态中
• 菜单缓存：菜单结构缓存在localStorage中

章节来源

• src/router.ts

微前端集成

插件化架构

系统通过插件机制支持微前端架构：

export default function VitePluginWidgetProvider(): any {
  return {
    name: 'vite-plugin-widget-provider',
    apply: 'build',
    transform(code, id) {
      if (fileRegex.test(id)) {
        if (regex.test(id)) {
          const codeData = parseCode(code)
          const transformCode = mergeCodeString(codeData, code)
          return { code: transformCode, map: null }
        }
      }
    },
  }
}

组件隔离

图表来源

• script/plugins/vite-plugin-widget-provider.ts

运行时集成

系统支持运行时动态加载微前端组件：

// 动态导入组件
const getWidgetSettingsFile = async (widgetName: string) => {
  const widgetPath = `./widgets/${widgetName}/Settings/${widgetName}.settings`
  const fn = async (suffix: string) => {
    const WidgetSettings = await import(/* @vite-ignore */ widgetPath + suffix)
    currentWidgetSettings.value = markRaw(WidgetSettings.default)
    return currentWidgetSettings.value
  }
  try {
    await fn('.tsx')
  } catch (error) {
    await fn('.vue')
  }
}

章节来源

• script/plugins/vite-plugin-widget-provider.ts
• src/App.vue

故障排除指南

常见问题与解决方案

1. 路由无法加载

症状：访问路由时出现404错误 原因：组件文件路径不正确或index.ts配置错误 解决方案：

# 检查组件文件结构
ls -la src/widgets/YourWidget/

# 验证index.ts导出
cat src/widgets/YourWidget/index.ts

2. 菜单不显示

症状：组件存在但菜单中不显示 原因：canvasView配置缺失或notPage设置为true 解决方案：

// 确保index.ts包含正确的canvasView配置
export default {
  canvasView: provider(YourComponent),
  name: "显示名称",
  icon: "图标名称"
}

3. 构建失败

症状：npm run build时出现错误 原因：TypeScript类型检查失败或插件配置错误 解决方案：

# 清理缓存重新构建
rm -rf node_modules/.cache
npm run build

调试工具

系统提供了丰富的调试功能：

// 启用调试模式
const onOpenDebugger = async () => {
  await settingDebuggerMode()
  ElMessage.success('调试模式设置成功')
}

// 路由状态监控
watch(() => route?.meta, (meta) => {
  console.log('路由变更:', meta)
})

章节来源

• src/App.vue

总结

本动态路由与菜单生成系统通过创新的技术方案实现了高度自动化和可扩展的前端架构：

核心优势

1. 自动化程度高：从组件发现到菜单生成全程自动化
2. 性能优异：多级缓存和懒加载策略确保最佳性能
3. 扩展性强：支持微前端架构和插件化扩展
4. 开发友好：零配置开发体验，降低维护成本

技术亮点

• 智能路由发现：基于文件系统的自动路由生成
• 实时菜单更新：运行时动态更新菜单结构
• 类型安全保障：完整的TypeScript类型支持
• 微前端集成：原生支持微前端架构

最佳实践建议

1. 遵循命名规范：严格遵守组件命名和文件结构规范
2. 合理使用缓存：根据业务需求调整缓存策略
3. 性能监控：定期监控内存使用和加载性能
4. 版本管理：建立完善的组件版本管理和发布流程

该系统为企业级前端应用提供了强大而灵活的基础架构，能够满足复杂业务场景的需求，同时保持良好的开发体验和运维效率。