如何在Flutter中解决侧边栏引发的导航路由循环问题

预设导航流程如下图：

核心实现逻辑为管控页面栈的实例存在性，每次跳转前校验目标页面是否已在栈中，按需清除冗余页面再跳转，全程无需修改侧边栏drawer的UI结构，仅调整跳转逻辑即可。

方案1：基于原生命名路由 + 自定义RouteObserver实现 #

适合没有引入第三方路由框架的项目：

• 首先给所有页面统一配置唯一的路由名称常量，避免名称冲突
• 继承RouteObserver自定义路由监听器，维护当前页面栈的路由名称列表，每次路由触发didPush/didPop/didReplace生命周期时同步更新列表，实时掌握栈内所有页面的存在情况
• 封装全局统一跳转方法，页面内链接点击、侧边栏drawer的跳转操作全部调用该方法：
  1. 先判断目标路由是否已经存在于当前栈的名称列表中
  2. 如果已存在：调用Navigator.popUntil方法直接退回到目标页面的已有实例，不新增页面入栈
  3. 如果不存在：若为home的直属子页面，先popUntil退回到home页面，再push目标页面，保证栈内仅保留home和目标页面；若为子页面的后代页面，直接正常push入栈即可
• 核心代码示例：

// 路由常量统一管理
class RouteNames {
  static const String home = '/home';
  static const String warehouses = '/warehouses';
  static const String products = '/products';
  static const String closeExpiry = '/closeExpiry';
  // 其他页面路由常量依次补充
}

// 自定义路由观察者
class CustomRouteObserver extends RouteObserver<ModalRoute> {
  static final List<String> _routeStack = [];
  List<String> get routeStack => List.unmodifiable(_routeStack);

  @override
  void didPush(Route route, Route? previousRoute) {
    super.didPush(route, previousRoute);
    if (route.settings.name != null) _routeStack.add(route.settings.name!);
  }

  @override
  void didPop(Route route, Route? previousRoute) {
    super.didPop(route, previousRoute);
    if (route.settings.name != null) _routeStack.remove(route.settings.name!);
  }

  @override
  void didReplace({Route? newRoute, Route? oldRoute}) {
    super.didReplace(newRoute: newRoute, oldRoute: oldRoute);
    if (oldRoute?.settings.name != null) _routeStack.remove(oldRoute!.settings.name!);
    if (newRoute?.settings.name != null) _routeStack.add(newRoute!.settings.name!);
  }
}

// 全局统一跳转方法
void navigateTo(BuildContext context, String targetRouteName, {Object? arguments}) {
  final observer = CustomRouteObserver();
  final existIndex = observer.routeStack.indexOf(targetRouteName);
  // 目标页面已存在，直接退回到对应实例
  if (existIndex != -1) {
    Navigator.popUntil(context, (route) => route.settings.name == targetRouteName || route.isFirst);
    return;
  }
  // 配置home的直属子页面列表
  const homeDirectChildren = [RouteNames.warehouses, RouteNames.closeExpiry, RouteNames.products];
  if (homeDirectChildren.contains(targetRouteName)) {
    // 退回到home后再push目标页面，保证栈结构符合要求
    Navigator.popUntil(context, ModalRoute.withName(RouteNames.home));
    Navigator.pushNamed(context, targetRouteName, arguments: arguments);
  } else {
    // 后代页面直接入栈
    Navigator.pushNamed(context, targetRouteName, arguments: arguments);
  }
}

• 最后将自定义的路由观察者注册到MaterialApp的navigatorObservers列表中即可生效。如果需要保留已有页面的状态（比如列表滚动位置），可搭配AutomaticKeepAliveClientMixin实现页面保活。

方案2：基于go_router路由框架实现 #

适合中大型项目、已引入go_router做路由管理的场景：

• 给每个页面配置唯一的路径，同时明确路由的父子层级关系，比如home为根路径/，直属子页面路径为/warehouses、/closeExpiry等，子页面的后代页面配置为/warehouses/products这类嵌套路径
• 跳转逻辑按需调用对应方法：跳转到home的直属子页面使用go方法，框架会自动替换路由栈，保证不会出现重复的页面实例；跳转到子页面的后代页面使用push方法正常入栈即可
• 无需手动维护路由栈，框架自带的路由状态管理会自动保证同一路由仅存在一个实例，同时天然适配侧边栏drawer的跳转需求。

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