Flutter Web使用onGenerateRoutes实现URL路由策略遇问题

当然可以，onGenerateRoute不仅能实现和routes配置一致的URL路由策略，还能支持更复杂的路由逻辑，完全适配官方的URL策略要求。

Flutter的URL路由策略（比如路径式URL）的核心是设置全局的URL策略，和你用routes还是onGenerateRoute没有绑定关系。只要完成URL策略的初始化，再在onGenerateRoute中对应处理URL路径即可。

具体实现步骤： #

1. 初始化URL策略
   在main函数中配置官方推荐的PathUrlStrategy（替代默认的哈希路由）：

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  // 设置路径式URL策略
  setUrlStrategy(PathUrlStrategy());
  runApp(const MyApp());
}

2. 在onGenerateRoute中处理URL路径
   你的AppRouter.setupRouting可以通过RouteSettings.name获取当前的URL路径，再匹配对应的页面：

class AppRouter {
  static Route<dynamic> setupRouting(RouteSettings settings) {
    final String path = settings.name ?? '/';

    switch (path) {
      case '/':
        return MaterialPageRoute(builder: (_) => const RootScreen());
      case '/settings':
        return MaterialPageRoute(builder: (_) => const SettingsScreen());
      // 处理更多自定义路径
      default:
        return MaterialPageRoute(builder: (_) => const NotFoundScreen());
    }
  }
}

3. 保持现有MaterialApp配置
   不需要启用routes字段，onGenerateRoute会接管所有路由生成逻辑，包括通过URL触发的路由跳转：

return MaterialApp(
  title: Localized.brand,
  scrollBehavior: MaterialScrollBehavior().copyWith(
    dragDevices: {
      PointerDeviceKind.mouse,
      PointerDeviceKind.touch,
    },
  ),
  onGenerateRoute: AppRouter.setupRouting, // 继续使用该配置
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
    useMaterial3: true,
  ),
  // 建议去掉home，直接在onGenerateRoute中处理根路径，避免路由冲突
  // home: const RootScreen(),
);

额外说明： #

• 如果需要处理带参数的URL（比如/user/123），可以在setupRouting中拆分路径字符串或用正则解析参数，再传递给目标页面。
• 若要简化复杂路由逻辑，也可以考虑使用go_router这类路由库，但纯原生的onGenerateRoute完全能满足基础的URL路由需求。

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