flutter goroute如何实现路由管理

在Flutter中使用go_router实现路由管理时，如何配置嵌套路由和动态路由参数？遇到页面跳转传参和返回结果处理的问题，官方文档的例子比较简单，实际项目中多个模块需要复杂路由跳转，比如带TabBar的嵌套导航，或者需要身份验证的拦截跳转，有没有更详细的实践方案？

2 回复

Flutter GoRouter 通过声明式路由管理，使用 GoRouter 类定义路由表，支持路径参数、查询参数和嵌套导航。通过 go 和 push 方法跳转，结合 ShellRoute 实现底部导航等布局。

更多关于flutter goroute如何实现路由管理的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中，GoRouter 是一个强大的声明式路由管理库，适用于复杂的导航场景，支持深度链接、路由保护等功能。以下是实现步骤：

1. 添加依赖

在 pubspec.yaml 中添加依赖：

dependencies:
  go_router: ^13.0.0  # 使用最新版本

2. 基本路由配置

定义路由规则并配置 GoRouter：

import 'package:go_router/go_router.dart';

final GoRouter router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => const HomePage(),
    ),
    GoRoute(
      path: '/details/:id', // 动态参数
      builder: (context, state) {
        final id = state.pathParameters['id']!;
        return DetailsPage(id: id);
      },
    ),
  ],
);

3. 集成到 App 中

在 main.dart 中使用 MaterialApp.router：

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: router, // 注入路由配置
    );
  }
}

4. 页面跳转

使用 context.go() 或 context.push() 进行导航：

// 跳转到详情页（替换当前路由）
onPressed: () => context.go('/details/123');

// 或推入新页面（保留栈）
onPressed: () => context.push('/details/456');

5. 路由保护（认证检查）

通过 redirect 实现路由拦截：

final GoRouter router = GoRouter(
  redirect: (context, state) {
    final bool isLoggedIn = checkAuth(); // 检查登录状态
    if (!isLoggedIn && state.location != '/login') {
      return '/login'; // 重定向到登录页
    }
    return null; // 允许访问
  },
  routes: [/* 路由定义 */],
);

6. 深度链接支持

GoRouter 自动支持传入的 URL，直接通过 context.go('/path') 即可处理。

注意事项

  • 路径参数：使用 :paramName 定义动态段，通过 state.pathParameters 获取。
  • 查询参数：通过 state.uri.queryParameters 获取（如 /page?key=value）。
  • 嵌套导航：结合 ShellRoute 实现底部导航栏等复杂布局。

GoRouter 通过简洁的声明式配置，高效管理路由跳转、参数传递和权限控制，适合中大型 Flutter 项目。

回到顶部