Go_Router使用问题：页面返回结果传递与路由信息获取

1. 实现页面间参数传递与返回结果接收 #

你的通用路由函数可以通过修改返回类型、利用context.push的Future特性以及extra参数，实现双向数据传递：

修改后的通用路由函数 #

static Future<dynamic> go(
  {required BuildContext context,
  required Mode mode,
  required String moveTo,
  var param}) async {
  try {
    switch (mode) {
      case Mode.PUSH:
        // 传递参数到目标页面，同时等待返回结果
        final result = await context.push(
          RouteName.root + moveTo,
          extra: param,
        );
        return result;
      case Mode.REPLACE:
        await context.pushReplacement(
          RouteName.root + moveTo,
          extra: param,
        );
        break;
      case Mode.REMOVE:
        context.go(RouteName.root);
        await context.pushReplacement(
          RouteName.root + moveTo,
          extra: param,
        );
        break;
      case Mode.POP:
        // POP时携带返回结果给上一页
        context.pop(param);
        break;
    }
  } catch (e) {
    print(e);
    return null;
  }
  return null;
}

用法示例 #

• 页面A跳转至页面B并接收返回结果：

// 在页面A中调用
final result = await RouterUtil.go(
  context: context,
  mode: Mode.PUSH,
  moveTo: '/pageB',
  param: {'userId': 456},
);
// 处理返回结果
if (result != null) {
  print('页面B返回的数据: $result');
}

• 页面B获取参数并返回结果：

// 在页面B中获取传递的参数
final param = GoRouterState.of(context).extra as Map<String, dynamic>;
print('页面A传递的参数: ${param['userId']}');

// 返回时传递结果
ElevatedButton(
  onPressed: () {
    RouterUtil.go(
      context: context,
      mode: Mode.POP,
      moveTo: '', // POP模式下moveTo无意义，可留空
      param: {'status': 'success', 'message': '操作完成'},
    );
  },
  child: const Text('返回'),
)

2. 监听路由事件获取页面信息 #

通过自定义NavigatorObserver可以监听所有导航动作（进入、返回、替换路由等），从而追踪用户活动：

自定义路由观察者 #

class AppRouteObserver extends NavigatorObserver {
  @override
  void didPush(Route<dynamic> route, Route<dynamic>? previousRoute) {
    super.didPush(route, previousRoute);
    // 进入新页面时记录信息
    final currentPage = route.settings.name;
    final prevPage = previousRoute?.settings.name;
    print('用户从 $prevPage 进入 $currentPage');
    // 这里可以将日志存入本地或上传到分析平台
  }

  @override
  void didPop(Route<dynamic> route, Route<dynamic>? previousRoute) {
    super.didPop(route, previousRoute);
    // 返回上一页时记录信息
    final currentPage = previousRoute?.settings.name;
    final poppedPage = route.settings.name;
    print('用户从 $poppedPage 返回 $currentPage');
  }

  @override
  void didReplace({Route<dynamic>? newRoute, Route<dynamic>? oldRoute}) {
    super.didReplace(newRoute: newRoute, oldRoute: oldRoute);
    final newPage = newRoute?.settings.name;
    final oldPage = oldRoute?.settings.name;
    print('用户将 $oldPage 替换为 $newPage');
  }
}

在GoRouter中配置观察者 #

final appRouter = GoRouter(
  observers: [AppRouteObserver()], // 添加自定义观察者
  routes: [
    // 你的路由配置
    GoRoute(
      path: '/',
      builder: (context, state) => const HomePage(),
    ),
    GoRoute(
      path: '/pageB',
      builder: (context, state) => const PageB(),
    ),
  ],
);

页面内获取当前路由信息 #

如果需要在页面内部直接获取当前路由的详细信息（如参数、路径），可以通过GoRouterState：

final routeState = GoRouterState.of(context);
print('当前页面路径: ${routeState.fullPath}');
print('路由参数: ${routeState.params}');
print('传递的额外参数: ${routeState.extra}');

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