Flutter GetX路由代理：同页面不同参数跳转页面不刷新问题

问题核心 #

从分类页面自身跳转至同一页面并携带不同参数时，URL更新但页面无变化，原因有两点：

• 自定义AppRouterDelegate未处理参数变化导致页面未重建
• CollectionPage未监听路由参数更新，无法响应变化

解决方案 #

1. 修复AppRouterDelegate，强制参数变化时重建页面 #

通过给页面添加基于路由+参数的唯一Key，让Navigator在参数变化时识别为新页面实例，触发重建：

class AppRouterDelegate extends GetDelegate {
  @override
  Widget build(BuildContext context) {
    return Navigator(
      onPopPage: (route, result) => route.didPop(result),
      pages: currentConfiguration != null
          ? [
              currentConfiguration!.currentPage!.copyWith(
                // 用路由名+参数组合生成唯一Key
                key: ValueKey(
                  '${currentConfiguration!.currentPage!.name}-${currentConfiguration!.parameters.entries.map((e) => '${e.key}=${e.value}').join('&')}',
                ),
              )
            ]
          : [GetNavConfig.fromRoute('/')!.currentPage!], // 修正原代码中默认路由与getPages不一致的问题
    );
  }
}

2. 在CollectionPage中监听参数变化 #

根据页面类型选择以下一种方式：

方式一：StatelessWidget结合Obx监听（推荐）

class CollectionPage extends StatelessWidget {
  const CollectionPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Obx(() {
      final categoryId = Get.parameters['id'] ?? '';
      // 这里根据categoryId更新UI或请求数据
      return Scaffold(
        appBar: AppBar(title: Text('分类：$categoryId')),
        body: Center(child: Text('当前分类ID：$categoryId')),
      );
    });
  }
}

方式二：StatefulWidget通过生命周期处理

class CollectionPage extends StatefulWidget {
  const CollectionPage({super.key});

  @override
  State<CollectionPage> createState() => _CollectionPageState();
}

class _CollectionPageState extends State<CollectionPage> {
  late String _currentCategoryId;

  @override
  void initState() {
    super.initState();
    _currentCategoryId = Get.parameters['id'] ?? '';
    _fetchCategoryData(_currentCategoryId);
  }

  @override
  void didUpdateWidget(covariant CollectionPage oldWidget) {
    super.didUpdateWidget(oldWidget);
    final newCategoryId = Get.parameters['id'] ?? '';
    if (newCategoryId != _currentCategoryId) {
      _currentCategoryId = newCategoryId;
      _fetchCategoryData(_currentCategoryId); // 参数变化时重新请求数据
    }
  }

  void _fetchCategoryData(String categoryId) {
    // 实现分类数据请求逻辑
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('分类：$_currentCategoryId')),
      body: Center(child: Text('当前分类ID：$_currentCategoryId')),
    );
  }
}

3. 确认现有配置正确性 #

GetPage中已设置preventDuplicates: false，该配置正确，确保允许同一路由的参数更新操作。

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