Flutter路由模块化管理方案

总结记录一下Flutter路由模块管理:

1、创建路由基类

Dart 复制代码
abstract class BaseRouteConfig {
  Map<String, WidgetBuilder> get routes;
}

2、创建不同模块的路由配置类

Dart 复制代码
// 认证模块路由
class AuthRoutes extends BaseRouteConfig {
  @override
  Map<String, WidgetBuilder> get routes => {
    'login': (context) {
      final int viType = ModalRoute.of(context)?.settings.arguments as int;
      return PassLoginPage(viType: viType);
    },
    '/login': (context) => const LoginPage(),
    'phoneVerifyCode': (context) {
      final phone = ModalRoute.of(context)?.settings.arguments as String?;
      return PhoneVerifyCodePage(phone: phone);
    },
    '/phoneVerifyCode': (context) => const PhoneVerifyCodePage(),
    // 其他认证相关路由...
  };
}

// 用户中心模块路由
class UserCenterRoutes extends BaseRouteConfig {
  @override
  Map<String, WidgetBuilder> get routes => {
    'editPersonal': (context) => const EditPersonalPage(),
    'userCenter': (context) => const IndividualCenter(),
    'accountSecurity': (context) => const AccountSecurity(),
    // 其他用户中心路由...
  };
}

// 商家模块路由
class MerchantRoutes extends BaseRouteConfig {
  @override
  Map<String, WidgetBuilder> get routes => {
    'merchant': (context) => const MerchantWidget(),
    'merchantBasicInfo': (context) => const MerchantBasicInfo(),
    'merchantBasicDetail': (context) {
      final status = ModalRoute.of(context)?.settings.arguments as String?;
      return MerchantBasicDetail(status: status);
    },
    // 其他商家路由...
  };
}

3、创建聚合路由配置类

Dart 复制代码
class AppRoutes {
  static final Map<String, WidgetBuilder> _allRoutes = {};

  static void initialize() {
    _allRoutes.addAll(AuthRoutes().routes);
    _allRoutes.addAll(UserCenterRoutes().routes);
    _allRoutes.addAll(MerchantRoutes().routes);
    // 添加其他模块路由...
  }

  static Map<String, WidgetBuilder> get allRoutes => _allRoutes;
}

4、使用方法,修改 main 方法初始化路由

Dart 复制代码
void main() async {
  // ...其他初始化代码
  
  // 初始化路由配置
  AppRoutes.initialize();

  runApp(
    MaterialApp(
      // ...
      routes: AppRoutes.allRoutes,
      // ...
    )
  );
}

5、添加新路由模块的示例

Dart 复制代码
// 新增创作中心模块
class CreativeRoutes extends BaseRouteConfig {
  @override
  Map<String, WidgetBuilder> get routes => {
    'creativeCenter': (context) => const CreativeCenter(),
    'workRelease': (context) => const WorkRelease(),
    'uploadWork': (context) => const UploadWorkPage(),
    // 其他创作相关路由...
  };
}

// 在 AppRoutes 中添加
class AppRoutes {
  // ...
  static void initialize() {
    // ...
    _allRoutes.addAll(CreativeRoutes().routes);
  }
}

优势说明:

  1. 模块化管理:将路由按功能模块划分,便于维护和查找

  2. 扩展性强:新增模块只需创建新的配置类并注册到 AppRoutes

  3. 类型安全:每个路由配置都是强类型校验

  4. 参数处理:保留原有的动态参数处理逻辑

  5. 命名规范

  • 使用命名路由统一以'/'开头
  • 页面路由使用小驼峰命名
  • Dialog 路由添加 Dialog 后缀

这种架构可以很好地支持大型项目的路由管理需求,同时保持代码的可维护性和扩展性。新的开发人员可以快速定位路由配置位置,模块负责人可以独立维护自己模块的路由配置。

相关推荐
妮妮喔妮25 分钟前
图片上传 el+node后端+数据库
javascript·数据库·vue.js
求知若渴,虚心若愚。3 小时前
Error reading config file (/home/ansible.cfg): ‘ACTION_WARNINGS(default) = True
linux·前端·ansible
LinDaiuuj4 小时前
最新的前端技术和趋势(2025)
前端
一只小风华~4 小时前
JavaScript 函数
开发语言·前端·javascript·ecmascript·web
程序猿阿伟5 小时前
《不只是接口:GraphQL与RESTful的本质差异》
前端·restful·graphql
仰望星空的凡人6 小时前
【JS逆向基础】数据库之MongoDB
javascript·数据库·python·mongodb
若梦plus7 小时前
Nuxt.js基础与进阶
前端·vue.js
樱花开了几轉7 小时前
React中为甚么强调props的不可变性
前端·javascript·react.js
风清云淡_A7 小时前
【REACT18.x】CRA+TS+ANTD5.X实现useImperativeHandle让父组件修改子组件的数据
前端·react.js
小飞大王6667 小时前
React与Rudex的合奏
前端·react.js·前端框架