Flutter使用GoRouter从末位路由返回首路由并清空路由栈

假设你的路由已配置命名路径示例如下：

final GoRouter router = GoRouter(
  routes: [
    GoRoute(
      path: '/a',
      name: 'pageA',
      builder: (context, state) => PageA(),
    ),
    GoRoute(
      path: '/b',
      name: 'pageB',
      builder: (context, state) => PageB(),
    ),
    GoRoute(
      path: '/c',
      name: 'pageC',
      builder: (context, state) => PageC(),
    ),
    GoRoute(
      path: '/d',
      name: 'pageD',
      builder: (context, state) => PageD(),
    ),
  ],
);

以下是两种常用的实现方式：

方法一：使用go()重置整个路由栈 #

GoRouter的go()方法会直接替换整个导航栈为目标路由的结构，调用后栈中只会保留A页面，完全匹配需求。在D页面的按钮点击事件中添加：

ElevatedButton(
  onPressed: () {
    // 直接导航到A页面，清空原有路由栈
    context.go('/a');
    // 也可以用命名路由调用：context.goNamed('pageA');
  },
  child: const Text('完成'),
)

方法二：使用popUntil()弹出中间路由 #

如果需要保留A页面的原有状态（不重新初始化），可以用popUntil()方法，持续弹出路由直到找到A页面：

ElevatedButton(
  onPressed: () {
    // 弹出A页面之上的所有路由（B、C、D）
    context.popUntil((route) => route.name == 'pageA');
    // 也可通过路径判断：route.settings.name == '/a'
  },
  child: const Text('完成'),
)

两种方法的差异 #

• go()会重新创建A页面实例，适合不需要保留A页面状态的场景。
• popUntil()保留原有A页面实例，仅移除上层路由，适合需要维持A页面状态的场景。

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