Flutter go_router如何避免路由重复？商品详情路由复用咨询

你现在的问题根源是给每个品类单独配置了详情子路由，导致路由代码重复。可以通过传递品类参数或者动态路由匹配两种方式复用同一个详情页路由，同时满足返回对应品类列表页的需求。

方案一：独立详情路由 + 品类标识参数 #

把商品详情页设为独立的顶级路由，跳转时携带productId（商品ID）和category（品类标识，比如laptops、mobiles、desktops）两个参数，详情页根据category参数就能精准返回对应列表页。

示例路由配置：

final goRouter = GoRouter(
  routes: [
    GoRoute(
      path: '/laptops',
      builder: (context, state) => const LaptopsListPage(),
    ),
    GoRoute(
      path: '/mobiles',
      builder: (context, state) => const MobilesListPage(),
    ),
    GoRoute(
      path: '/desktops',
      builder: (context, state) => const DesktopsListPage(),
    ),
    // 单个详情页路由，覆盖所有品类
    GoRoute(
      path: '/product-details',
      builder: (context, state) {
        final productId = state.queryParameters['productId']!;
        final category = state.queryParameters['category']!;
        return ProductDetailsPage(
          productId: productId,
          category: category,
        );
      },
    ),
  ],
);

跳转详情页逻辑（以笔记本列表页为例）：

// 点击商品时触发跳转
context.push(
  '/product-details',
  queryParameters: {
    'productId': '123',
    'category': 'laptops',
  },
);

详情页返回逻辑：

ElevatedButton(
  onPressed: () {
    // 根据category参数返回对应列表页
    context.popUntil(ModalRoute.withName('/$category'));
  },
  child: const Text('返回列表'),
)

方案二：动态品类父路由 + 详情子路由 #

如果想保留路由层级关系，可以用动态路由匹配，把品类作为父路由的参数，详情页作为该动态父路由的子路由，只需配置一次详情路由即可覆盖所有品类。

示例路由配置：

final goRouter = GoRouter(
  routes: [
    // 动态匹配所有品类路由
    GoRoute(
      path: '/:category',
      builder: (context, state) {
        final category = state.pathParameters['category']!;
        // 根据品类渲染对应列表页
        switch (category) {
          case 'laptops':
            return const LaptopsListPage();
          case 'mobiles':
            return const MobilesListPage();
          case 'desktops':
            return const DesktopsListPage();
          default:
            return const NotFoundPage();
        }
      },
      // 单个详情子路由，复用所有品类
      routes: [
        GoRoute(
          path: 'product-details/:productId',
          builder: (context, state) {
            final productId = state.pathParameters['productId']!;
            final category = state.pathParameters['category']!;
            return ProductDetailsPage(
              productId: productId,
              category: category,
            );
          },
        ),
      ],
    ),
  ],
);

跳转详情页逻辑（以手机列表页为例）：

// 点击商品时跳转，继承当前品类的父路由
context.push('/mobiles/product-details/456');

详情页返回逻辑：

ElevatedButton(
  onPressed: () {
    // 直接pop即可回到父路由对应的品类列表页
    context.pop();
  },
  child: const Text('返回列表'),
)

两种方案都能彻底解决路由重复问题：方案一更灵活，适合品类路由结构差异大的场景；方案二更贴合路由层级，返回逻辑更简洁。

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