flutter如何实现go_router导航

在Flutter项目中如何使用go_router实现页面导航？我目前正在使用go_router进行路由管理，但在处理嵌套路由和传递参数时遇到了一些困惑。想请教大家：

  1. 如何正确定义路由配置，特别是带有参数的动态路由？
  2. 在深链接场景下如何保证路由跳转的正确性？
  3. 有没有处理路由拦截和权限验证的最佳实践？

希望能看到具体的代码示例和常见问题的解决方案。

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');

// 返回
context.pop();
  1. 传参：
// 传递参数
context.go('/details?id=123');

// 获取参数
final id = state.params['id'];

使用MaterialApp.router配置路由即可。

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


在Flutter中使用go_router实现导航的步骤如下：

1. 添加依赖

dependencies:
  go_router: ^13.0.0

2. 基本配置

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);
      },
    ),
    GoRoute(
      path: '/profile',
      builder: (context, state) => const ProfilePage(),
    ),
  ],
);

3. 在MaterialApp中配置

MaterialApp.router(
  routerConfig: router,
)

4. 导航方法

// 普通导航
context.go('/details/123');

// 带查询参数
context.go('/profile?tab=settings');

// 替换当前路由
context.go('/details/123', extra: someObject);

// 返回上一页
context.pop();

// 带返回值的导航
context.push('/details/123');

5. 嵌套导航

ShellRoute(
  builder: (context, state, child) {
    return Scaffold(
      body: child,
      bottomNavigationBar: BottomNavigationBar(
        // 底部导航栏
      ),
    );
  },
  routes: [
    // 嵌套路由
  ],
)

6. 路由守卫

final GoRouter router = GoRouter(
  redirect: (context, state) {
    // 检查登录状态
    final isLoggedIn = authService.isLoggedIn;
    if (!isLoggedIn && state.location != '/login') {
      return '/login';
    }
    return null;
  },
);

go_router提供了声明式路由管理，支持深链接、路由守卫等高级功能，是Flutter中推荐的路由解决方案。

回到顶部