4.2 命名路由与参数传递

命名路由通过字符串标识路由使导航更语义化。合理设计路由参数传递方式是构建清晰导航架构的关键。一、命名路由基础1.1 注册与使用MaterialApp(initialRoute:/,routes:{/:(context)constHomePage(),/login:(context)constLoginPage(),/product/list:(context)constProductListPage(),/profile:(context)constProfilePage(),},)// 导航到命名路由Navigator.pushNamed(context,/product/list);Navigator.pushReplacementNamed(context,/home);Navigator.pushNamedAndRemoveUntil(context,/,(_)false);二、参数传递方式2.1 通过 arguments 传递// 传值方任意对象Navigator.pushNamed(context,/product/detail,arguments:ProductArgs(id:42,from:home),);// 接收方classProductDetailPageextendsStatelessWidget{staticconstrouteName/product/detail;overrideWidgetbuild(BuildContextcontext){finalargsModalRoute.of(context)!.settings.argumentsasProductArgs;returnText(Product ID:${args.id});}}// 参数类推荐定义专门的类classProductArgs{finalint id;finalStringfrom;constProductArgs({requiredthis.id,requiredthis.from});}2.2 通过构造函数传递直接 push// 直接传入构造函数参数最简单无类型安全问题Navigator.push(context,MaterialPageRoute(builder:(_)ProductDetailPage(productId:42,fromRoute:home),),);classProductDetailPageextendsStatelessWidget{finalint productId;finalStringfromRoute;constProductDetailPage({super.key,requiredthis.productId,requiredthis.fromRoute,});}2.3 通过 onGenerateRoute 解析 URL 参数MaterialApp(onGenerateRoute:(settings){finaluriUri.parse(settings.name??/);finalpathSegmentsuri.pathSegments;finalqueryParamsuri.queryParameters;// /product/42?fromhometabdetailif(pathSegments.length2pathSegments[0]product){finalproductIdint.tryParse(pathSegments[1]);returnMaterialPageRoute(builder:(_)ProductDetailPage(productId:productId!,tab:queryParams[tab]??info,),settings:settings,);}returnMaterialPageRoute(builder:(_)constNotFoundPage());},)// 使用 URL 风格导航Navigator.pushNamed(context,/product/42?fromhometabdetail);三、返回值传递// 页面 A等待返回值void_openEditPage()async{finalresultawaitNavigator.pushNamedUserProfile(context,/profile/edit,arguments:currentUser,);if(result!null){setState(()_userresult);ScaffoldMessenger.of(context).showSnackBar(constSnackBar(content:Text(保存成功)));}}// 页面 B返回数据void_saveAndReturn(){finalupdatedProfileUserProfile(name:_nameController.text);Navigator.pop(context,updatedProfile);// 将数据传回}四、路由拦截与守卫MaterialApp(onGenerateRoute:(settings){// 路由守卫检查登录状态finalrequiresAuth_authRoutes.contains(settings.name);if(requiresAuth!AuthService.isLoggedIn){returnMaterialPageRoute(builder:(_)LoginPage(redirectTo:settings.name),);}return_generateRoute(settings);},)const_authRoutes{/profile,/orders,/checkout};小结参数传递方式类型安全适用场景argumentsObject❌ 需运行时转型命名路由参数构造函数直接传✅ 编译期检查push时推荐URL Query 参数❌ 字符串解析Web 深链GoRouter 参数✅ 类型安全现代推荐方案 下一节4.3 第三方路由GoRouter / AutoRoute / GetX