Flutter中GoRouter路径参数失效：如何实现动态页面构建

你的代码核心逻辑没问题，问题大概率出在MyHomePage的状态类实现上——你只提供了StatefulWidget的定义，没给出_MyHomePageState的build代码，推测是AppBar的标题没有绑定传入的widget.title，而是硬编码成了'Home'。

第一步：补全MyHomePage的状态类 #

确保在build方法里使用widget.title作为AppBar的标题：

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // 必须用widget.title绑定传入的参数，而非硬写字符串
        title: Text(widget.title),
      ),
      body: Center(
        child: Text('当前路径参数：${widget.title}'),
      ),
    );
  }
}

第二步：优化路由配置（可选，更简洁） #

你可以把两个路由合并成一个，用可选参数的方式避免重复代码：

final GoRouter router = GoRouter(
  routes: <GoRoute>[
    GoRoute(
      path: '/:input?', // ?标记input为可选参数
      builder: (BuildContext context, GoRouterState state) {
        final String title = state.pathParameters['input'] ?? 'Home';
        return MyHomePage(title: title);
      },
    ),
  ],
);

第三步：验证路由跳转方式 #

如果在Web端测试，确保通过GoRouter的方式跳转（比如调用context.go('/thing')），而非手动修改URL后刷新——手动刷新可能需要额外配置Web路由策略（比如在web/index.html里设置<base href="/">）。

测试验证 #

现在运行项目：

• 访问根路径/，页面标题显示Home
• 访问/thing，页面标题会自动更新为thing

后续你可以在builder方法中加入数据库查询逻辑，用state.pathParameters['input']作为主键获取数据，再将数据传递给MyHomePage即可实现动态加载页面内容。

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