如何在异步函数中让Navigator绑定特定路由并仅弹出该路由？

一、原生Navigator实现方案 #

1. 直接持有当前路由引用 #

在组件初始化时获取所在路由的实例，异步操作完成后先检查该路由是否还在导航栈内，再执行弹出：

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

  @override
  State<AsyncPopWidget> createState() => _AsyncPopWidgetState();
}

class _AsyncPopWidgetState extends State<AsyncPopWidget> {
  Route? _attachedRoute;

  @override
  void initState() {
    super.initState();
    // 组件渲染完成后获取当前路由
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _attachedRoute = ModalRoute.of(context);
    });
  }

  Future<void> doSomethingAsync() async {
    // 模拟耗时异步操作
    await Future.delayed(const Duration(seconds: 2));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            await doSomethingAsync();
            if (mounted && _attachedRoute != null) {
              // 检查路由是否仍在导航栈中
              if (Navigator.of(context).contains(_attachedRoute!)) {
                Navigator.pop(context);
              }
            }
          },
          child: const Text("异步操作后仅弹出当前路由"),
        ),
      ),
    );
  }
}

2. 用唯一Key标记路由 #

给目标路由设置全局唯一的PageStorageKey，异步完成后遍历栈找到对应路由再弹出：

// 定义全局唯一的路由标记Key
final _targetRouteKey = const PageStorageKey('async_pop_route');

// 推入目标路由时绑定Key
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => const AsyncPopWidget(),
    settings: RouteSettings(key: _targetRouteKey),
  ),
);

// 组件内的异步弹出逻辑
ElevatedButton(
  onPressed: () async {
    await doSomethingAsync();
    if (mounted) {
      final navigator = Navigator.of(context);
      // 从栈中查找标记的路由
      final targetRoute = navigator.route?.children.firstWhere(
        (route) => route.settings.key == _targetRouteKey,
        orElse: () => null,
      );
      if (targetRoute != null) {
        // 先回到目标路由所在位置，再弹出
        navigator.popUntil((route) => route == targetRoute);
        navigator.pop();
      }
    }
  },
  child: const Text("异步操作后仅弹出标记路由"),
)

二、go_router实现方案 #

1. 通过路由名称精准控制 #

给目标路由设置唯一名称，异步完成后检查该路由是否在栈内，再执行弹出：

// 定义go_router路由配置
final goRouter = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => const HomePage(),
    ),
    GoRoute(
      path: '/async-pop',
      name: 'async_pop_route', // 唯一路由名称
      builder: (context, state) => const AsyncPopPage(),
    ),
  ],
);

// AsyncPopPage内的逻辑
class AsyncPopPage extends StatelessWidget {
  const AsyncPopPage({super.key});

  Future<void> doSomethingAsync() async {
    await Future.delayed(const Duration(seconds: 2));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            await doSomethingAsync();
            final router = GoRouter.of(context);
            // 检查目标路由是否存在于栈中
            final hasTargetRoute = router.routerDelegate.currentConfiguration.matches.any(
              (match) => match.route.name == 'async_pop_route',
            );
            if (hasTargetRoute) {
              // 直接弹出目标路由（如果是栈顶），或者用popUntil精准定位
              router.pop();
              // 如果目标路由不在栈顶，用下面的代码：
              // router.popUntil((route) => route.name != 'async_pop_route');
            }
          },
          child: const Text("异步操作后仅弹出指定路由"),
        ),
      ),
    );
  }
}

2. 通过当前路由Location判断 #

直接获取组件所在路由的location，异步完成后对比栈内的location：

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

  Future<void> doSomethingAsync() async {
    await Future.delayed(const Duration(seconds: 2));
  }

  @override
  Widget build(BuildContext context) {
    final currentLocation = GoRouterState.of(context).location;
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            await doSomethingAsync();
            final router = GoRouter.of(context);
            // 检查当前路由的location是否还在栈中
            final isLocationPresent = router.routerDelegate.currentConfiguration.matches.any(
              (match) => match.location == currentLocation,
            );
            if (isLocationPresent) {
              router.pop();
            }
          },
          child: const Text("异步操作后仅弹出当前路由"),
        ),
      ),
    );
  }
}

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