如何在Stacked框架中为URL添加查询参数？

我刚好在Stacked项目里处理过完全一样的查询参数需求，给你拆解下具体的实现步骤，都是亲测能用的：

1. 导航时携带查询参数 #

Stacked的RouterService其实已经内置了查询参数的支持，你不需要修改原有的/results路由路径，直接在导航时通过queryParams参数传递键值对就行：

// 先获取注入的RouterService实例
final routerService = locator<RouterService>();

// 把过滤条件组装成Map
final filterParams = {
  'color': 'blue',
  'size': 'large',
  'status': 'active',
};

// 导航到Results页面并携带参数
routerService.navigateTo(
  Routes.resultsView, // 这里填你定义的Results页面路由名称
  queryParams: filterParams,
);

执行这段代码后，URL就会自动变成/results?color=blue&size=large&status=active，完全符合你的需求。

2. 在页面ViewModel中接收并使用参数 #

接下来在Results页面的ViewModel里，你可以通过RouterService拿到当前路由的查询参数，然后用这些参数做结果过滤：

class ResultsViewModel extends BaseViewModel {
  final _routerService = locator<RouterService>();
  Map<String, String>? _currentFilters;

  @override
  void initialise() {
    // 获取当前路由的查询参数
    _currentFilters = _routerService.currentRoute?.queryParams;
    // 用参数执行过滤逻辑
    if (_currentFilters != null) {
      final color = _currentFilters!['color'];
      final size = _currentFilters!['size'];
      final status = _currentFilters!['status'];
      _filterResults(color, size, status);
    }
  }

  void _filterResults(String? color, String? size, String? status) {
    // 这里写你的结果过滤逻辑
    // 比如根据color、size等条件过滤客户数据
  }
}

3. 动态更新URL中的查询参数 #

如果用户在页面上调整过滤条件（比如切换颜色为red），想要同步更新URL的话，可以用replaceWith方法替换当前路由，这样不会在浏览器历史中新增多余的记录：

void updateFilter(String newColor) {
  // 保留原有参数，只更新颜色
  final updatedParams = {
    ..._currentFilters!,
    'color': newColor,
  };
  // 替换当前路由，更新URL
  _routerService.replaceWith(
    Routes.resultsView,
    queryParams: updatedParams,
  );
  // 更新过滤结果并通知UI刷新
  _filterResults(newColor, updatedParams['size'], updatedParams['status']);
  notifyListeners();
}

最后补充个小提示：如果是外部用户直接访问带查询参数的URL（比如从邮件链接打开/results?status=active），Stacked会自动解析这些参数，ViewModel初始化时一样能正常获取，不需要额外修改路由定义。

内容来源于stack exchange