Flutter Navigator 2.0下如何解析URL参数及初始加载时获取URL参数的疑问

嘿，我来帮你理清Flutter Navigator 2.0里的URL参数解析问题，尤其是你提到的初始加载场景！

一、通用的URL参数解析方法 #

在Navigator 2.0体系中，解析URL参数主要依赖Dart的Uri类，根据参数所在位置的不同，有两种常见处理方式：

• 参数在hash路径中（比如 /#/user?id=1234）：直接解析RouteInformation提供的location字段

  // 在RouteInformationParser的parseRouteInformation方法中
  final uri = Uri.parse(routeInformation.location!);
  final userId = uri.queryParameters['id']; // 拿到1234
  

• 参数在hash路径外（比如你的场景 http://localhost:8080?id=1234/#/user）：通过Uri.base获取完整的浏览器URL来解析

  final uri = Uri.base;
  final userId = uri.queryParameters['id']; // 拿到1234
  

二、你的场景：初始加载时获取id参数的具体实现 #

针对你给出的URL结构，id=1234是在hash（/#/user）之前的部分，所以RouteInformation的location只会返回/user，没法从location里拿到参数。这时候推荐在两个位置处理：

1. 在RouterDelegate的initState中获取（最直接） #

initState是RouterDelegate初始化时调用的方法，正好对应页面初始加载的时机，在这里解析参数并更新路由状态：

class AppRouterDelegate extends RouterDelegate<AppRouteConfig> 
    with ChangeNotifier, PopNavigatorRouterDelegateMixin<AppRouteConfig> {
  final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();
  // 假设你有一个管理路由状态的类
  final AppRouteState routeState = AppRouteState();

  @override
  void initState() {
    super.initState();
    // 初始加载时提取URL参数
    final uri = Uri.base;
    final userId = uri.queryParameters['id'];
    if (userId != null) {
      // 更新路由状态，比如把参数传递给/user页面的配置
      routeState.currentConfig = AppRouteConfig.user(userId: userId);
      notifyListeners(); // 通知路由更新
    }
  }

  // 其他RouterDelegate必需的方法（比如build、setNewRoutePath等）...
}

2. 在RouteInformationParser中整合参数到路由配置 #

如果你希望把参数直接包含到路由配置对象中，也可以在parseRouteInformation方法里同时获取全局URL参数：

class AppRouteParser extends RouteInformationParser<AppRouteConfig> {
  @override
  Future<AppRouteConfig> parseRouteInformation(RouteInformation routeInformation) async {
    final pathUri = Uri.parse(routeInformation.location!);
    // 获取hash路径外的全局参数
    final globalParams = Uri.base.queryParameters;
    final userId = globalParams['id'];

    if (pathUri.path == '/user') {
      // 把userId参数传入路由配置
      return AppRouteConfig.user(userId: userId);
    }
    // 其他路由的处理...
    return AppRouteConfig.home();
  }

  // 其他方法...
}

这样不管是初始加载还是后续路由变化，你都能灵活获取和传递URL参数啦～

内容的提问来源于stack exchange，提问作者Joey Yi Zhao