Flutter电商应用开发：如何为每个页面维护唯一URL？

我正在开发一款类似亚马逊的电商Flutter应用，分类页面要展示数百个商品，用户点击商品后跳转至对应的商品详情页。现在需要为每个商品页面维护唯一的URL，但之前硬编码每个商品路由的方式明显不合理：

MaterialApp(
    routes: {
        '/itemOne': (context) => <ItemOneWidget>,
        '/itemTwo': (context) => <ItemTwoWidget>
    },
...
)

合理解决方案 #

1. 原生带参数的命名路由

不需要为每个商品单独定义路由，只需要配置一个通用的商品详情页路由，通过商品唯一ID作为参数传递，就能生成唯一URL：

• 第一步：配置通用路由

MaterialApp(
  routes: {
    '/category': (context) => CategoryPage(), // 分类页路由
    '/item': (context) => ItemDetailPage(),    // 通用商品详情页路由
  },
)

• 第二步：分类页跳转时传递商品ID

// 假设每个商品对象有唯一的id字段，比如item.id
Navigator.pushNamed(
  context,
  '/item',
  arguments: item.id // 把商品ID作为参数传递
);

• 第三步：商品详情页获取参数并渲染

class ItemDetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 获取路由传递的商品ID
    final String itemId = ModalRoute.of(context)!.settings.arguments as String;
    
    // 根据itemId从接口/本地缓存获取对应商品数据，渲染页面
    return Scaffold(
      appBar: AppBar(title: Text('商品详情')),
      body: Center(child: Text('当前商品ID：$itemId')),
    );
  }
}

2. 用GoRouter实现更灵活的动态路由（推荐）

如果需要支持外部深层链接（比如从浏览器/其他APP打开指定商品页），或者需要更简洁的路由写法，推荐使用go_router包：

• 第一步：配置动态路由

final GoRouter _router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => CategoryPage(),
    ),
    // 用:itemId定义动态参数，生成的URL就是/item/xxx（xxx为商品ID）
    GoRoute(
      path: '/item/:itemId',
      builder: (context, state) {
        // 直接从路由参数中获取商品ID
        final String itemId = state.params['itemId']!;
        return ItemDetailPage(itemId: itemId);
      },
    ),
  ],
);

// MaterialApp使用GoRouter
MaterialApp.router(
  routerConfig: _router,
);

• 第二步：分类页跳转

// 直接通过商品ID拼接路由路径
context.go('/item/${item.id}');

为什么硬编码路由不可取？ #

• 数百个商品需要写数百条路由，代码极度冗余，维护成本极高
• 新增/删除商品时必须修改路由配置，扩展性为零
• 无法适配动态生成的商品数据（比如从接口拉取的商品列表）

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