企业官网建设流程全解析

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?q=flutter'); // 额外参数 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:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> <data android:scheme="myapp" android:host="example.com" /> </intent-filter>

iOS 配置

<key>CFBundleURLTypes</key> <array> <dict> <key>CFBundleURLSchemes</key> <array> <string>myapp</string> </array> </dict> </array>

页面过渡动画

默认过渡

GoRoute( path: '/details', pageBuilder: (context, state) { return MaterialPage<void>( key: state.pageKey, child: const DetailsPage(), ); }, );

自定义过渡

GoRoute( path: '/details', pageBuilder: (context, state) { return CustomTransitionPage<void>( key: state.pageKey, child: const DetailsPage(), transitionsBuilder: (context, animation, secondaryAnimation, child) { return FadeTransition( opacity: animation, child: child, ); }, ); }, );

滑动过渡

CustomTransitionPage<void>( 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 路由管理的首选方案，值得深入学习和使用。