Go Router：如何在任意路径下推送发票页至导航栈顶部

核心实现思路 #

Go Router的push方法本身就是将新页面添加到当前导航栈顶部，完全符合你需要的“在任意页面上方推送发票页，且返回能回到原页面”的需求，无需复杂栈操作，直接调用即可。

具体步骤 #

1. 配置发票页路由
   在你的GoRouter路由表中添加发票页面的路由定义：

final GoRouter _router = GoRouter(
  routes: [
    // 其他现有路由...
    GoRoute(
      path: '/invoice',
      builder: (context, state) => const InvoicePage(),
    ),
  ],
);

2. 支付完成后触发推送
   在支付成功的回调逻辑中，直接调用push方法，无论当前处于哪个页面，发票页都会被推到栈顶：

// 支付完成回调示例
void onPaymentSuccess() {
  // 可通过extra传递发票相关参数
  GoRouter.of(context).push(
    '/invoice',
    extra: {'invoiceId': 'INV-20240501'},
  );
}

3. 发票页添加返回逻辑
   在发票页的AppBar中使用默认返回按钮，或自定义返回按钮调用pop回到原页面：

class InvoicePage extends StatelessWidget {
  const InvoicePage({super.key});

  @override
  Widget build(BuildContext context) {
    // 获取传递的参数（可选）
    final invoiceParams = GoRouterState.of(context).extra as Map<String, dynamic>?;

    return Scaffold(
      appBar: AppBar(
        title: const Text('发票详情'),
        // 自定义返回按钮（也可使用默认返回按钮）
        leading: IconButton(
          icon: const Icon(Icons.arrow_back),
          onPressed: () => GoRouter.of(context).pop(),
        ),
      ),
      body: Center(
        child: Text('发票编号：${invoiceParams?['invoiceId']}'),
      ),
    );
  }
}

关键说明 #

• push方法不会替换现有导航栈，仅在栈顶添加新页面，返回时会回到跳转前的原页面，完全匹配需求。
• 参数传递推荐用extra字段，适合复杂数据；简单标识类参数也可使用路径参数（如/invoice/:id）。
• GoRouter已封装底层栈管理逻辑，比手动实现Navigator 2更简洁，无需额外处理栈状态。

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