Flutter中Go Router跳转新页面时当前页面重载问题求助

1. 路由层级不匹配：你代码中实际定义的目标路由是/resource_staff，但跳转时使用的是/staff_profile，路径不匹配会导致GoRouter重新解析整个路由树；同时该目标路由是顶级GoRoute，不属于ShellRoute的子路由列表——从ShellRoute下的/home页面跳转至顶级路由时，GoRouter会重新评估栈结构，触发ShellRoute的builder重新执行，进而导致/home页面被重建。而原生Navigator.push仅在当前栈添加页面，不会触发路由树的全局解析，因此不会出现原页面重载的情况。
2. Provider实例获取方式：你在HomeFragment的builder中直接调用RepositoryProvider.of<...>(context)，默认会监听Provider状态变化，若路由跳转时关联Provider的状态发生变动，也会触发页面不必要的重建。

方案1：修正路由路径并纳入ShellRoute子路由 #

如果跳转到员工详情页时需要保留Shell的布局（比如底部导航栏），先修正路由路径匹配问题，再将目标路由移入ShellRoute的子路由列表：

ShellRoute(
  observers: [
    GoRouterObserver(analytics: FirebaseAnalytics.instance),
  ],
  builder: (context, state, child) {
    // ... 原Shell组件代码
  },
  routes: <RouteBase>[
    GoRoute(
      path: '/home',
      builder: (context, state) => HomeFragemnt(...),
    ),
    // 将员工详情路由加入Shell子路由
    GoRoute(
      path: '/staff_profile',
      builder: (context, state) {
        var nhanVienGuid = state.uri.queryParameters['nhanVienGuid'].toString();
        return StaffSummaryDetail(
          reportRepository: RepositoryProvider.of<ReportRepository>(context),
          nhanVienGuid: nhanVienGuid,
          onTabStaffInfo: (postion , ageMin , ageMax , coSoGuid ) {
            context.push('/staff_list?position=$postion&ageMin=$ageMin&ageMax=$ageMax&coSoGuid=$coSoGuid');
          },
        );
      },
    ),
  ],
),

这种方式下Shell结构保持稳定，/home页面不会因路由跳转被重建。

方案2：使用命名路由精准跳转 #

若目标路由必须作为顶级路由，先给路由添加名称，再用pushNamed替代push，避免路径拼写错误导致的路由解析异常：

// 配置路由时添加name字段
GoRoute(
  name: 'staff_profile',
  path: '/staff_profile',
  builder: (context, state) => StaffSummaryDetail(...),
),

// 跳转时使用命名路由
context.pushNamed('staff_profile', queryParameters: {'nhanVienGuid': staffGuid});

方案3：优化Provider获取逻辑 #

将RepositoryProvider.of的调用移到initState中，并添加listen: false，避免因Provider状态变化触发不必要的页面重建：

class HomeFragment extends StatefulWidget {
  const HomeFragment({super.key, required this.onTabStaff, ...});

  @override
  State<HomeFragment> createState() => _HomeFragmentState();
}

class _HomeFragmentState extends State<HomeFragment> {
  late UserRepository _userRepository;
  late CoSoRepository _coSoRepository;
  late ReportRepository _reportRepository;

  @override
  void initState() {
    super.initState();
    // 非监听模式获取Provider实例
    _userRepository = RepositoryProvider.of<UserRepository>(context, listen: false);
    _coSoRepository = RepositoryProvider.of<CoSoRepository>(context, listen: false);
    _reportRepository = RepositoryProvider.of<ReportRepository>(context, listen: false);
  }

  @override
  Widget build(BuildContext context) {
    // 使用预获取的实例构建页面
    return ...;
  }
}

方案4：保持HomeFragment状态 #

若无法避免页面重建，使用AutomaticKeepAliveClientMixin保留页面状态，减少重载带来的性能影响：

class _HomeFragmentState extends State<HomeFragment> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用此方法
    return ...;
  }
}

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