使用auto_route的AutoRouter组件时，如何向自动加载的子页面注入参数？

当然可以给自动显示的ChildRoute传递参数，这里提供两种实用的实现方式：

方法一：路由配置中指定initialArgs #

直接在路由配置里给ChildRoute的AutoRoute添加initialArgs，这是最直接的方式，适合初始化时固定传递的参数。

修改路由配置 #

@AutoRouterConfig()
class AppRouter extends RootStackRouter {
  @override
  RouteType get defaultRouteType => const RouteType.material();

  @override
  List<AutoRoute> get routes => <AutoRoute>[
        AutoRoute(
          path: '/',
          page: InitialRoute.page,
          initial: true,
          children: <AutoRoute>[
            // 给子路由添加initialArgs
            AutoRoute(
              page: ChildRoute.page,
              initial: true,
              initialArgs: const ChildArgs(message: "初始传递的参数"),
            ),
            RedirectRoute(path: '*', redirectTo: ''),
          ],
        ),
      ];
}

// 定义参数类
class ChildArgs {
  final String message;
  const ChildArgs({required this.message});
}

接收参数的ChildRoute #

@RoutePage()
class ChildRoute extends StatelessWidget {
  // 通过构造函数接收参数，auto_route会自动注入initialArgs
  const ChildRoute({super.key, required this.args});

  final ChildArgs args;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Text(args.message)),
    );
  }
}

方法二：在InitialRoute中通过Router修改初始路由参数 #

如果参数需要动态生成（比如从InitialRoute的状态或外部获取），可以在InitialRoute中获取AutoRouterDelegate，通过replace方法替换初始路由并传递参数。

修改InitialRoute代码 #

@RoutePage()
class InitialRoute extends StatelessWidget {
  const InitialRoute({super.key});

  @override
  Widget build(BuildContext context) {
    // 获取当前的router delegate
    final router = AutoRouter.of(context);
    
    // 在初始化完成后替换路由，传递动态参数
    WidgetsBinding.instance.addPostFrameCallback((_) {
      router.replace(
        ChildRouteRoute(args: ChildArgs(message: "动态生成的参数")),
      );
    });

    return WrapperWidget(
      child: AutoRouter(),
    );
  }
}

补充：使用路径/查询参数传递 #

如果需要通过URL路径或查询参数传递参数，可以在ChildRoute的构造函数参数上添加对应的注解：

@RoutePage()
class ChildRoute extends StatelessWidget {
  // 路径参数
  const ChildRoute({super.key, @pathParam() required this.id});
  // 或查询参数
  // const ChildRoute({super.key, @queryParam() required this.message});

  final String id;
  // final String message;

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: Center(child: Text(id)));
  }
}

对应的路由配置可以写成：

AutoRoute(
  page: ChildRoute.page,
  initial: true,
  path: 'child/:id', // 路径参数配置
)

内容的提问来源于stack exchange，提问作者Meamine