Flutter GoRouter 路由导航详解：现代化路由解决方案

Flutter GoRouter 路由导航详解现代化路由解决方案引言在 Flutter 应用中路由导航是一个核心功能。GoRouter 是 Flutter 官方推荐的新一代路由管理库提供了声明式路由定义、深度链接支持、导航守卫等强大功能。GoRouter 基础用法安装依赖dependencies: go_router: ^12.0.0基本配置import package:go_router/go_router.dart; final GoRouter _router GoRouter( routes: RouteBase[ GoRoute( path: /, builder: (BuildContext context, GoRouterState state) { return const HomePage(); }, ), GoRoute( path: /details, builder: (BuildContext context, GoRouterState state) { return const DetailsPage(); }, ), ], ); class MyApp extends StatelessWidget { const MyApp({super.key}); override Widget build(BuildContext context) { return MaterialApp.router( routerConfig: _router, title: GoRouter Demo, ); } }路由参数路径参数final GoRouter _router GoRouter( routes: RouteBase[ GoRoute( path: /user/:id, builder: (BuildContext context, GoRouterState state) { final String userId state.pathParameters[id]!; return UserPage(userId: userId); }, ), ], );查询参数GoRoute( path: /search, builder: (BuildContext context, GoRouterState state) { final String? query state.queryParameters[q]; return SearchPage(query: query); }, );额外参数GoRoute( path: /details, builder: (BuildContext context, GoRouterState state) { final Product product state.extra as Product; return DetailsPage(product: product); }, );导航方式基本导航// 导航到指定路径 context.go(/details); // 导航并添加到导航栈 context.push(/details); // 返回上一页 context.pop();带参数导航// 路径参数 context.go(/user/123); // 查询参数 context.go(/search?qflutter); // 额外参数 context.push(/details, extra: product);命名路由final GoRouter _router GoRouter( routes: RouteBase[ GoRoute( name: home, path: /, builder: (context, state) const HomePage(), ), GoRoute( name: details, path: /details, builder: (context, state) const DetailsPage(), ), ], ); // 使用名称导航 context.goNamed(details);嵌套路由基础嵌套final GoRouter _router GoRouter( routes: RouteBase[ GoRoute( path: /dashboard, builder: (context, state) const DashboardPage(), routes: RouteBase[ GoRoute( path: profile, builder: (context, state) const ProfilePage(), ), GoRoute( path: settings, builder: (context, state) const SettingsPage(), ), ], ), ], );Shell 路由final GoRouter _router GoRouter( routes: RouteBase[ ShellRoute( builder: (context, state, child) { return Scaffold( body: child, bottomNavigationBar: BottomNavigationBar( items: const [ BottomNavigationBarItem(icon: Icon(Icons.home), label: Home), BottomNavigationBarItem(icon: Icon(Icons.settings), label: Settings), ], ), ); }, routes: RouteBase[ GoRoute( path: /, builder: (context, state) const HomePage(), ), GoRoute( path: /settings, builder: (context, state) const SettingsPage(), ), ], ), ], );导航守卫全局守卫final GoRouter _router GoRouter( routes: RouteBase[ // ... ], redirect: (BuildContext context, GoRouterState state) { final bool isLoggedIn checkAuth(); if (!isLoggedIn state.path ! /login) { return /login; } return null; }, );路由级别守卫GoRoute( path: /admin, builder: (context, state) const AdminPage(), redirect: (context, state) { final bool isAdmin checkAdmin(); return isAdmin ? null : /access-denied; }, );深度链接配置深度链接final GoRouter _router GoRouter( routes: RouteBase[ GoRoute( path: /product/:id, builder: (context, state) { final String productId state.pathParameters[id]!; return ProductPage(productId: productId); }, ), ], );Android 配置intent-filter action android:nameandroid.intent.action.VIEW / category android:nameandroid.intent.category.DEFAULT / category android:nameandroid.intent.category.BROWSABLE / data android:schememyapp android:hostexample.com / /intent-filteriOS 配置keyCFBundleURLTypes/key array dict keyCFBundleURLSchemes/key array stringmyapp/string /array /dict /array页面过渡动画默认过渡GoRoute( path: /details, pageBuilder: (context, state) { return MaterialPagevoid( key: state.pageKey, child: const DetailsPage(), ); }, );自定义过渡GoRoute( path: /details, pageBuilder: (context, state) { return CustomTransitionPagevoid( key: state.pageKey, child: const DetailsPage(), transitionsBuilder: (context, animation, secondaryAnimation, child) { return FadeTransition( opacity: animation, child: child, ); }, ); }, );滑动过渡CustomTransitionPagevoid( key: state.pageKey, child: const DetailsPage(), transitionsBuilder: (context, animation, secondaryAnimation, child) { return SlideTransition( position: animation.drive( Tween( begin: const Offset(1, 0), end: Offset.zero, ), ), child: child, ); }, )错误处理404 页面final GoRouter _router GoRouter( routes: RouteBase[ // ... ], errorBuilder: (context, state) { return const NotFoundPage(); }, );错误重定向final GoRouter _router GoRouter( routes: RouteBase[ // ... ], redirect: (context, state) { if (state.error ! null) { return /error; } return null; }, );最佳实践1. 集中管理路由// router/router.dart final GoRouter router GoRouter( routes: [ homeRoute, detailsRoute, userRoute, ], ); // router/routes/home_route.dart final GoRoute homeRoute GoRoute( path: /, builder: (context, state) const HomePage(), );2. 使用 TypeSafe 路由extension GoRouterExtension on GoRouter { void goToUser(String id) go(/user/$id); void goToSearch(String query) go(/search?q$query); }3. 配合状态管理final GoRouter _router GoRouter( routes: RouteBase[ GoRoute( path: /, builder: (context, state) { return Consumer( builder: (context, ref, child) { final user ref.watch(userProvider); if (user null) { return const LoginPage(); } return const HomePage(); }, ); }, ), ], );总结GoRouter 是一个功能强大的路由管理库提供了声明式路由定义、深度链接支持、导航守卫等丰富功能。通过合理使用 GoRouter我们可以构建健壮、可扩展的导航系统。掌握 GoRouter 后你可以轻松定义和管理路由实现复杂的导航逻辑支持深度链接创建自定义页面过渡动画实现权限控制和导航守卫GoRouter 是 Flutter 路由管理的首选方案值得深入学习和使用。