Flutter非命名路由下，push新路由时如何修改浏览器URL？

当你用MaterialPageRoute手动push页面，又想同步更新浏览器URL时，得借助Flutter Web的路由信息管理API实现，具体步骤如下：

• 第一步，把常规的MaterialApp替换成MaterialApp.router，自定义路由代理和信息解析器：

class MyRouterDelegate extends RouterDelegate<RouteInformation>
    with ChangeNotifier, PopNavigatorRouterDelegateMixin<RouteInformation> {
  final GlobalKey<NavigatorState> navigatorKey;
  final List<Widget> _pages = [const HomeRoute()];

  MyRouterDelegate() : navigatorKey = GlobalKey<NavigatorState>();

  @override
  Widget build(BuildContext context) {
    return Navigator(
      key: navigatorKey,
      pages: List.of(_pages),
      onPopPage: (route, result) {
        if (!route.didPop(result)) return false;
        _pages.removeLast();
        notifyListeners();
        return true;
      },
    );
  }

  // 手动push页面时调用此方法，同步更新URL
  void pushPage(Widget page, String path) {
    _pages.add(page);
    setNewRoutePath(RouteInformation(location: path));
    notifyListeners();
  }

  @override
  Future<void> setNewRoutePath(RouteInformation routeInformation) async {
    // 可在此处理从URL跳转进来的场景，根据path加载对应页面
    return SynchronousFuture(null);
  }
}

class MyRouteInformationParser extends RouteInformationParser<RouteInformation> {
  @override
  Future<RouteInformation> parseRouteInformation(RouteInformation routeInformation) async {
    return SynchronousFuture(routeInformation);
  }

  @override
  RouteInformation restoreRouteInformation(RouteInformation configuration) {
    return configuration;
  }
}

• 第二步，在MaterialApp中配置自定义路由组件：

MaterialApp.router(
  routerDelegate: MyRouterDelegate(),
  routeInformationParser: MyRouteInformationParser(),
  routeInformationProvider: PlatformRouteInformationProvider(
    initialRouteInformation: const RouteInformation(location: '/'),
  ),
);

• 第三步，替换原来的Navigator.push，调用自定义的push方法：

// 获取自定义的RouterDelegate实例
final routerDelegate = Router.of(context).routerDelegate as MyRouterDelegate;
routerDelegate.pushPage(const SecondRoute(), '/secondRoute');

这样操作后，pushSecondRoute时浏览器URL会自动变为http://localhost:37291/#/secondRoute，同时浏览器的前进后退按钮也能和页面栈操作对应上。这种方式需要你自己管理页面栈与URL的对应关系，比命名路由更灵活，也适配官方不推荐命名路由的趋势，适合动态页面或需要自定义路由逻辑的场景。

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