文章 · Flutter 路由架构

说明：本文提供可直接复用的代码范式，不依赖具体项目实现。

在小项目里，路由只是 Navigator.push。但在中大型应用中，路由体系需要承担可维护性、可扩展性与协作效率。本文给出一套可落地的路由架构范式，并配套代码示例。

1. 目标：把路由从“字符串跳转”升级为“可管理体系”

路由架构需要解决的问题：

路由路径集中管理
参数类型安全
页面构建统一入口
导航栈状态可追踪

2. 路由表：统一注册，禁止散落

推荐把路由表集中管理：

class Routes {
  static const home = '/';
  static const login = '/login';
  static const profile = '/profile';
  static const articleDetail = '/article/detail';
}

路由路径必须统一定义，避免出现“硬编码字符串”造成维护成本。

3. 参数管理：从 Map 到强类型

不建议直接用 Map<String, dynamic> 传参，易错且难维护。推荐做法：

class ArticleDetailArgs {
  final String id;
  final String? title;
  const ArticleDetailArgs({required this.id, this.title});
}

调用方式：

Navigator.pushNamed(
  context,
  Routes.articleDetail,
  arguments: const ArticleDetailArgs(id: '123', title: 'Demo'),
);

4. 统一构建入口：集中处理参数与异常

在 onGenerateRoute 中统一处理：

Route<dynamic> onGenerateRoute(RouteSettings settings) {
  switch (settings.name) {
    case Routes.articleDetail:
      final args = settings.arguments as ArticleDetailArgs;
      return MaterialPageRoute(
        builder: (_) => ArticleDetailPage(id: args.id, title: args.title),
      );
    default:
      return MaterialPageRoute(builder: (_) => const NotFoundPage());
  }
}

这样路由逻辑集中可控，便于做异常兜底。

5. 导航状态：用观察者做可追踪性

中大型项目要跟踪页面切换，建议加 RouteObserver：

final RouteObserver<PageRoute> routeObserver = RouteObserver<PageRoute>();

class RouteLogger extends RouteObserver<PageRoute<dynamic>> {
  @override
  void didPush(Route route, Route? previousRoute) {
    Log.d('route', 'push: ${route.settings.name}');
  }
}

这能让导航栈行为可观测，也方便埋点与调试。

6. 深链接与统一入口

如果有深链接需求，建议：

解析 URL → 映射到 Routes
参数解析统一在入口处理

示例：

RouteSettings parseDeepLink(Uri uri) {
  if (uri.path == '/article') {
    final id = uri.queryParameters['id'] ?? '';
    return RouteSettings(
      name: Routes.articleDetail,
      arguments: ArticleDetailArgs(id: id),
    );
  }
  return const RouteSettings(name: Routes.home);
}

7. 一份路由架构清单

总结

路由架构的核心是“可维护性”。把路由表集中管理、参数类型化、入口统一化，你的导航体系会从“随手写跳转”进化成“可控架构”。