Flutter中如何使用go_router实现路由管理

在Flutter项目中，我想使用go_router进行路由管理，但不太清楚具体怎么实现。主要遇到以下几个问题：

  1. 如何正确配置go_router的基本路由结构？
  2. 怎么实现带参数的路由跳转（比如传递用户ID）？
  3. 能否通过go_router实现底部导航栏的页面切换？
  4. 遇到路由守卫（例如登录验证）该怎样处理？
  5. 官方文档的例子看不太明白，有没有更简单的实战示例？
    目前用的Flutter版本是3.x，希望能得到详细的代码示范和常见坑点提示。
2 回复

在Flutter中使用go_router管理路由，首先添加依赖：

dependencies:
  go_router: ^12.0.0

然后定义路由配置：

final router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => HomePage(),
    ),
    GoRoute(
      path: '/details',
      builder: (context, state) => DetailsPage(),
    ),
  ],
);

在MaterialApp中使用：

MaterialApp.router(
  routerConfig: router,
)

导航使用：

context.go('/details');

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


在Flutter中使用go_router进行路由管理，可以简化导航逻辑并支持深层链接。以下是基本步骤：

  1. 添加依赖
    在pubspec.yaml中添加：

    dependencies:
  go_router: ^13.0.0

  2. 定义路由配置
    创建路由规则，示例：

    import 'package:go_router/go_router.dart';

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

  3. 配置MaterialApp
    将routerConfig传入MaterialApp：

    MaterialApp.router(
  routerConfig: router,
)

  4. 页面跳转
    使用context.go()或context.push()：

    onTap: () => context.go('/details/123')

  5. 错误页面处理
    添加errorBuilder：

    GoRouter(
  errorBuilder: (context, state) => ErrorPage(),
  // ...其他配置
)

关键特性：

  • 路径参数：通过/details/:id传递参数
  • 查询参数：使用state.uri.queryParameters
  • 重定向：通过redirect逻辑实现权限控制
  • 深层链接：自动支持URL打开对应页面

通过这种方式，可以高效管理Flutter应用的路由导航。

回到顶部