Flutter如何使用go_router进行路由拓展

在Flutter项目中集成了go_router进行路由管理，但不知道如何实现路由的拓展功能。比如想在现有路由基础上添加嵌套路由、动态路由参数或者权限控制，官方文档看得不是很明白。有没有实际项目中使用过go_router的大佬能分享一下具体实现方案？最好能提供一些代码示例，特别是如何处理路由拦截和传参的场景。

2 回复

在Flutter中使用go_router进行路由拓展，主要步骤如下：

  1. 安装依赖
    在pubspec.yaml中添加：
dependencies:
  go_router: ^12.0.0
  1. 基础配置
    定义路由表并配置路由：
final router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => HomePage(),
    ),
    GoRoute(
      path: '/detail/:id',
      builder: (context, state) {
        final id = state.pathParameters['id'];
        return DetailPage(id: id);
      },
    ),
  ],
);
  1. 路由跳转
    使用context.go()或context.push()：
// 替换当前路由栈
context.go('/detail/123');
// 堆叠新路由
context.push('/profile');
  1. 路由拓展
  • 嵌套路由：通过ShellRoute实现底部导航栏等结构
  • 路由守卫：使用redirect实现登录验证
  • 深度链接：直接通过URL参数传递数据
  1. 进阶功能
    支持路由过渡动画、自定义路径解析、查询参数处理等。通过继承GoRouter可进一步自定义路由逻辑。

记得在MaterialApp.router中配置routerConfig，即可快速实现声明式路由管理。

更多关于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/:id',
      builder: (context, state) {
        final id = state.pathParameters['id']!;
        return DetailsPage(id: id);
      },
    ),
  ],
);

3. 路由拓展（自定义路由）

使用 GoRoute 的 redirect 或自定义逻辑处理复杂场景：

示例1：路由守卫（认证检查）

GoRoute(
  path: '/profile',
  redirect: (context, state) {
    // 检查用户登录状态
    final isLoggedIn = checkAuthStatus();
    if (!isLoggedIn) {
      return '/login'; // 重定向到登录页
    }
    return null; // 允许访问
  },
  builder: (context, state) => ProfilePage(),
),

示例2：自定义路由传参

GoRoute(
  path: '/search',
  builder: (context, state) {
    final query = state.uri.queryParameters['q'] ?? '';
    return SearchPage(query: query);
  },
),
// 使用方式：context.go('/search?q=keyword')

示例3：嵌套路由（Shell路由）

ShellRoute(
  builder: (context, state, child) {
    return Scaffold(
      body: child,
      bottomNavigationBar: BottomNavBar(),
    );
  },
  routes: [
    GoRoute(
      path: '/tabs/home',
      builder: (_, state) => HomePage(),
    ),
    GoRoute(
      path: '/tabs/settings',
      builder: (_, state) => SettingsPage(),
    ),
  ],
)

4. 在MaterialApp中配置

MaterialApp.router(
  routerConfig: router,
)

5. 导航方法

// 跳转（无返回栈）
context.go('/details/123');

// 推送（保留返回栈）
context.push('/login');

// 返回
context.pop();

关键特性

  • 路径参数：使用 :id 获取动态片段
  • 查询参数：通过 state.uri.queryParameters 获取
  • 重定向：在 redirect 中实现路由拦截
  • 嵌套路由：使用 ShellRoute 实现通用布局

通过以上方式，可以灵活扩展go_router的路由功能，满足认证、传参、布局等复杂需求。

回到顶部