Flutter Web如何获取URL查询参数实现带id商品页路由访问

你当前的问题核心是路由配置里硬编码了固定id值，没有从URL中解析查询参数的逻辑，只要把静态路由表中的/product规则迁移到onGenerateRoute中做动态解析即可，原有页面代码不需要改动。

第一步：修改路由配置 #

删掉原来在routes路由表中写死的/product映射，在MaterialApp中添加onGenerateRoute回调统一处理路由解析：

MaterialApp(
  // 省略你已有的title、theme等配置
  // 删掉原来routes里的'/product'配置项
  onGenerateRoute: (settings) {
    // 解析当前访问的路由地址
    final routeUri = Uri.parse(settings.name ?? '/');
    
    // 匹配商品页路由
    if (routeUri.path == '/product') {
      // 从URL查询参数中读取id，做类型转换+兜底，防止非法参数导致崩溃
      final targetId = int.tryParse(routeUri.queryParameters['id'] ?? '0') ?? 0;
      
      // 保留你原有的用户类型判断逻辑，把硬编码的id换成解析出来的targetId
      if (Manager().userType() == "M" || Manager().userType() == "A") {
        return MaterialPageRoute(
          builder: (context) => ModProductPage(id: targetId),
          settings: settings, // 必须传settings，否则Web端地址栏同步、路由栈会异常
        );
      } else {
        return MaterialPageRoute(
          builder: (context) => ProductPage(id: targetId),
          settings: settings,
        );
      }
    }

    // 这里补全你其他页面的路由匹配规则，比如首页
    if (routeUri.path == '/') {
      return MaterialPageRoute(
        builder: (context) => const HomePage(), // 替换成你的首页组件
        settings: settings,
      );
    }

    // 兜底404页面，可根据你的业务需求调整
    return MaterialPageRoute(
      builder: (context) => const NotFoundPage(), // 替换成你的404组件
      settings: settings,
    );
  },
)

第二步：适配站内跳转 #

站内跳商品页的时候，直接把id拼到路由路径的查询参数位置即可，跳转后浏览器地址栏会自动同步成带参链接，用户复制链接就能直接打开对应商品：

// 跳转到id为3的商品页
Navigator.pushNamed(context, '/product?id=3');

注意事项 #

• 必须给id参数加兜底逻辑：如果用户输入的id不是合法数字、或者没传id参数，不要直接强转，可根据业务需求跳转到商品不存在提示页、或者默认商品页，避免页面崩溃。
• 所有MaterialPageRoute必须传入对应的settings参数，否则Flutter Web的浏览器前进后退、地址栏刷新功能会出现异常。
• 如果后续需要支持url.com/product/3这种路径参数格式，只要从routeUri.pathSegments中取对应位置的片段解析即可，逻辑和解析查询参数基本一致。

配置完成后直接在浏览器地址栏输入你的域名/product?id=3测试，刷新页面也能正常加载id=3的商品内容，不会再跳转到硬编码id的页面。

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