vite-plugin-pages 中的自定义路由数据方案探讨

背景介绍

vite-plugin-pages 是一个为 Vite 项目提供基于文件系统的路由生成的插件。在实际开发中，开发者经常需要为路由添加自定义元数据（meta），例如页面标题、权限控制信息、导航菜单配置等。目前常见的实现方式包括：

1. SFC 自定义块（custom block）
2. JSX/TSX 文件中的 YAML 格式注释
3. 直接在路由配置文件中定义

现有方案的局限性

当前方案存在几个明显的问题：

1. 类型支持不足：YAML 注释和 SFC 自定义块难以获得完整的 TypeScript 类型支持
2. 动态数据受限：无法直接导入和使用外部模块中的数据
3. 维护性差：路由配置与业务代码分离，增加了维护成本

运行时代码方案的优势

采用运行时代码导出路由元数据的方案具有以下优势：

1. 完整的类型支持：可以直接使用 TypeScript 类型检查
2. 动态数据能力：可以自由导入和使用任何模块中的数据
3. 框架无关性：不依赖特定框架的实现方式
4. 代码组织清晰：路由配置与页面组件在同一文件中，便于维护

实现原理

实现这种方案的核心思路是：

1. 在页面文件中导出命名路由配置对象
2. 通过 import.meta.glob 收集所有页面的路由配置
3. 在虚拟模块中合并自动生成的路由和自定义配置

示例实现代码：

// 虚拟模块中的收集逻辑
const customs = import.meta.glob(
  ['~/pages/**/*.tsx', '!~/pages/**/components/*'],
  { import: 'route', eager: true }
);

类型安全增强

结合 Vue Router 的类型系统，可以确保路由元数据的类型安全：

import type { RouteMeta } from 'vue-router';

export const route = {
  meta: {
    btnProps: {
      tip: 'home',
      icon: mdiHomeOutline,
      order: 2,
      hideOn: 'mobile',
    } satisfies RouteMeta,
  },
}

兼容性处理

对于没有导出路由配置的页面文件，可以通过插件的 transform 钩子自动添加空配置导出，避免运行时错误：

// 在插件transform钩子中
if (!code.includes('export const route')) {
  return `${code}\nexport const route = {}`;
}

总结

虽然 vite-plugin-pages 官方出于维护性考虑可能不会直接内置这种方案，但开发者完全可以基于现有功能自行实现。这种运行时代码方案提供了更好的开发体验和类型安全，特别适合中大型项目使用。通过合理的封装，这种方案可以保持与插件核心功能的解耦，确保长期可维护性。