AutoRoute库中pushAll方法在Web端的导航行为解析

问题现象

在使用AutoRoute路由库时，开发者发现pushAll方法在Web环境下表现异常。当通过该方法连续推送多个路由（如PlaceRoute和ProductRoute）后，使用浏览器后退按钮返回时，用户会被直接带回初始路由，而不是按照预期的顺序逐级返回。

技术背景

pushAll是AutoRoute提供的一个便捷方法，允许开发者一次性推送多个路由到导航栈。在移动端（iOS/Android）环境下，这个方法能够正常工作，按顺序将所有路由推入栈中，并保持正常的返回行为。

Web环境特殊性

Web浏览器具有自身的历史记录管理机制，与移动端的导航栈有本质区别：

1. 浏览器历史记录基于实际访问过的URL位置
2. 当使用pushAll时，只有最后一个路由（ProductRoute）会被实际展示给用户
3. 浏览器认为用户从未"访问"过中间路由（PlaceRoute）
4. 因此后退操作会直接跳过未展示的路由，回到初始位置

解决方案比较

原生pushAll方法

appRouter?.pushAll([
  PlaceRoute(),
  ProductRoute(),
]);

Web兼容方案

if (kIsWeb) {
  appRouter?.push(PlaceRoute());
  await Future.delayed(Constants.defAnimDur);
  appRouter?.push(ProductRoute());
} else {
  appRouter?.pushAll([PlaceRoute(), ProductRoute()]);
}

技术建议

1. 理解浏览器行为：在Web开发中，导航行为必须考虑浏览器历史记录机制
2. 平台差异处理：关键导航逻辑应考虑平台差异，使用kIsWeb进行条件判断
3. 动画延迟：Web环境下连续推送路由时，适当延迟可确保过渡动画完成
4. 用户体验一致性：虽然技术实现不同，但应保证用户在不同平台上获得一致的导航体验

最佳实践

对于需要跨平台的应用，推荐采用以下模式处理复杂导航场景：

Future<void> navigateToProduct() async {
  if (kIsWeb) {
    await _webSafePush(PlaceRoute());
    await _webSafePush(ProductRoute());
  } else {
    appRouter?.pushAll([PlaceRoute(), ProductRoute()]);
  }
}

Future<void> _webSafePush(PageRouteInfo route) async {
  appRouter?.push(route);
  await Future.delayed(const Duration(milliseconds: 300));
}

这种方法既保持了代码的清晰性，又确保了各平台的兼容性。