GoRouter技术疑问：能否一次性入栈两个页面？

问题描述 #

我正在使用go_router，计划在按钮回调中执行如下代码，意图一次性将两个页面加入路由历史栈，点击按钮后停留在page-2页面，返回时回到page-1页面：

ElevatedButton(
  onPressed: () {
    GoRouter.of(context)
      ..push('/page-1')
      ..push('/page-2');
  },
)

补充场景 #

实际需求是点击按钮后显示dialog页面，同时让page-1作为其背景，完整代码如下：

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

void main() {
  runApp(const MyApp());
}

final router = GoRouter(
  initialLocation: '/page-0',
  routes: [
    GoRoute(
      path: '/page-0',
      builder: (_, __) => const Page0Screen(),
    ),
    GoRoute(
      path: '/page-1',
      builder: (_, __) => const Page1Screen(),
    ),
    GoRoute(
      path: '/dialog',
      pageBuilder: (context, state) => DialogPage(
        key: state.pageKey,
        child: const DialogScreen(),
      ),
    ),
  ],
);

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: router,
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Page 0')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            GoRouter.of(context)
              ..push('/page-1')
              ..push('/dialog');
          },
          child: const Text('Push'),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Page 1')),
      body: const Center(
        child: Text('Page 1'),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const AlertDialog(
      title: Text('Dialog'),
    );
  }
}

class DialogPage extends Page {
  const DialogPage({
    required this.child,
    super.key,
  });

  final Widget child;

  @override
  Route createRoute(BuildContext context) {
    return DialogRoute(
      settings: this,
      context: context,
      builder: (context) {
        return child;
      },
    );
  }
}

效果演示：

可行性分析 #

这种链式连续push的写法能运行，但不推荐。实际测试中确实能将两个页面加入路由栈，返回时也会按page-2/dialog → page-1 → page-0的顺序跳转，但存在诸多问题。

不推荐的原因 #

• 用户体验问题：push是异步操作，连续调用会导致页面短暂显示page-1再跳转到目标页面（如动图中的闪烁），破坏交互流畅性。
• 路由状态风险：连续触发路由栈变更可能导致页面初始化逻辑未完成就被覆盖，在复杂页面中容易引发状态异常或bug。
• 不符合设计范式：GoRouter官方示例中无此类用法，这种写法属于hack式实现，后续版本迭代可能因路由逻辑变更出现兼容性问题。
• 代码可读性差：链式push的意图不够直观，增加维护成本，不利于后续路由逻辑的扩展与修改。

替代方案 #

针对「dialog以page-1为背景」的需求，推荐以下两种规范实现：

方案1：使用嵌套路由 #

将dialog作为page-1的子路由，通过一次push直接进入嵌套路由，路由栈变更为原子操作，避免中间状态：
修改路由配置：

final router = GoRouter(
  initialLocation: '/page-0',
  routes: [
    GoRoute(
      path: '/page-0',
      builder: (_, __) => const Page0Screen(),
    ),
    GoRoute(
      path: '/page-1',
      builder: (_, __) => const Page1Screen(),
      // 添加子路由
      routes: [
        GoRoute(
          path: 'dialog',
          pageBuilder: (context, state) => DialogPage(
            key: state.pageKey,
            child: const DialogScreen(),
          ),
        ),
      ],
    ),
  ],
);

修改按钮回调：

onPressed: () {
  GoRouter.of(context).push('/page-1/dialog');
},

此方案下路由栈为page-0 → page-1 → dialog，返回时按预期顺序跳转，且无页面闪烁。

方案2：在page-1中自动触发dialog #

若不想修改路由结构，可在page-1初始化完成后自动push dialog：
将Page1Screen改为有状态组件：

class Page1Screen extends StatefulWidget {
  const Page1Screen({super.key});

  @override
  State<Page1Screen> createState() => _Page1ScreenState();
}

class _Page1ScreenState extends State<Page1Screen> {
  @override
  void initState() {
    super.initState();
    // 页面构建完成后触发dialog
    WidgetsBinding.instance.addPostFrameCallback((_) {
      GoRouter.of(context).push('/dialog');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Page 1')),
      body: const Center(
        child: Text('Page 1'),
      ),
    );
  }
}

修改按钮回调为仅push page-1：

onPressed: () {
  GoRouter.of(context).push('/page-1');
},

此方案同样能实现需求，且避免了连续push的问题，但路由结构的关联性弱于嵌套路由。

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