Flutter中如何使用go_router实现路由导航

在Flutter项目中使用go_router进行路由导航时，如何配置基本的路由路径？比如想实现从首页跳转到详情页的功能，具体该怎样定义路由规则？另外，如何通过go_router传递参数到目标页面，以及在页面间返回时如何处理参数？官方文档里的嵌套路由示例看不太明白，能否给个简单易懂的实现示例？

2 回复

在Flutter中使用go_router实现路由导航：

  1. 定义路由配置：
final router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => HomePage(),
    ),
    GoRoute(
      path: '/details',
      builder: (context, state) => DetailsPage(),
    ),
  ],
);
  1. 导航到页面：
context.go('/details');
context.push('/details'); // 带返回
  1. MaterialApp中使用：
MaterialApp.router(
  routerConfig: router,
)

支持路径参数、查询参数、重定向等高级功能。

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


在Flutter中使用go_router实现路由导航，可以按照以下步骤操作：

1. 添加依赖

在 pubspec.yaml 中添加依赖：

dependencies:
  go_router: ^12.0.0

2. 基本配置

import 'package:go_router/go_router.dart';

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

3. 在MaterialApp中配置

MaterialApp.router(
  routerConfig: router,
)

4. 导航方法

  • 跳转页面：
context.go('/details');

或

context.push('/details');
  • 带参数跳转：
// 配置路由
GoRoute(
  path: '/details/:id',
  builder: (context, state) {
    final id = state.pathParameters['id'];
    return DetailsPage(id: id);
  },
)

// 跳转
context.go('/details/123');
  • 查询参数：
context.go('/details?id=123');
// 获取参数：state.uri.queryParameters['id']
  • 返回上一页：
context.pop();

5. 高级功能

  • 嵌套路由：使用ShellRoute
  • 路由守卫：在GoRouter配置中使用redirect
  • 错误页面：配置errorBuilder

示例完整代码

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

这样就能在Flutter应用中实现完整的路由导航功能。go_router提供了声明式路由配置，支持深层链接、路由保护等高级特性。

回到顶部