深入解析 Flutter 高级路由管理：使用 go_router 和 auto_route 实现复杂路由与拦截

深入解析 Flutter 高级路由管理：使用 go_router 和 auto_route 实现复杂路由与拦截

在 Flutter 中，随着应用规模的增长，路由管理变得越来越复杂。简单的 Navigator 和命名路由可能难以满足需求，比如嵌套路由、动态路由参数、路由守卫（如登录验证）等。为了解决这些问题，Flutter 社区提供了强大的第三方路由库，如 go_router 和 auto_route。

本篇博客将深入探讨如何使用 go_router 和 auto_route 实现复杂路由管理，并结合实际场景实现路由拦截（如登录验证）。

---

1. 为什么需要高级路由管理？

1.1 内置路由的局限性

• 嵌套路由难以管理：内置路由不支持嵌套路由，需要手动处理页面跳转逻辑。
• 缺乏路由守卫：无法轻松实现路由拦截（如登录验证）。
• 动态路由参数处理复杂：需要手动解析和传递参数。

1.2 第三方路由库的优势

• 嵌套路由：支持多级嵌套路由，简化复杂页面结构的管理。
• 动态路由参数：轻松处理动态参数和查询参数。
• 路由守卫：提供路由拦截功能，支持登录验证、权限控制等。
• 代码简洁：通过声明式路由配置，减少样板代码。

---

2. 使用 go_router 实现复杂路由管理

2.1 什么是 go_router？

go_router 是一个轻量级的路由库，专为 Flutter 设计，支持嵌套路由、动态路由参数和路由守卫。

2.2 安装 go_router

在 pubspec.yaml 中添加依赖：

dependencies:
  go_router: ^6.0.0

运行以下命令安装依赖：

flutter pub get

---

2.3 基本用法

路由配置

使用 GoRouter 配置路由表：

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final GoRouter _router = GoRouter(
    initialLocation: '/',
    routes: [
      GoRoute(
        path: '/',
        builder: (context, state) => HomePage(),
      ),
      GoRoute(
        path: '/details/:id',
        builder: (context, state) {
          final id = state.params['id']!;
          return DetailsPage(id: id);
        },
      ),
    ],
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: _router,
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("首页")),
      body: ListView(
        children: [
          ListTile(
            title: Text("详情页 1"),
            onTap: () => context.go('/details/1'),
          ),
          ListTile(
            title: Text("详情页 2"),
            onTap: () => context.go('/details/2'),
          ),
        ],
      ),
    );
  }
}

class DetailsPage extends StatelessWidget {
  final String id;

  DetailsPage({required this.id});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("详情页")),
      body: Center(
        child: Text("详情页 ID: $id"),
      ),
    );
  }
}

代码解析

1. GoRouter：定义路由表，配置路径和页面。
2. 动态路由参数：通过 state.params 获取动态参数。
3. context.go：实现页面跳转。

---

2.4 嵌套路由

场景

在电商应用中，商品详情页可能包含多个子页面（如商品信息、评论、推荐）。

实现嵌套路由

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

跳转到嵌套路由

context.go('/details/1/reviews');

---

2.5 路由拦截（登录验证）

场景

某些页面（如购物车、订单）需要登录后才能访问。

实现路由拦截

bool isLoggedIn = false;

final GoRouter _router = GoRouter(
  initialLocation: '/',
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => HomePage(),
    ),
    GoRoute(
      path: '/cart',
      builder: (context, state) => CartPage(),
      redirect: (context, state) {
        if (!isLoggedIn) {
          return '/login';
        }
        return null;
      },
    ),
    GoRoute(
      path: '/login',
      builder: (context, state) => LoginPage(),
    ),
  ],
);

代码解析

1. redirect：在路由跳转前检查登录状态。
2. 未登录时重定向：将用户重定向到登录页面。

---

3. 使用 auto_route 实现复杂路由管理

3.1 什么是 auto_route？

auto_route 是一个功能强大的路由库，支持代码生成、嵌套路由和路由守卫。

3.2 安装 auto_route

在 pubspec.yaml 中添加依赖：

dependencies:
  auto_route: ^5.0.0
  auto_route_generator: ^5.0.0
dev_dependencies:
  build_runner: ^2.0.0

运行以下命令安装依赖：

flutter pub get

---

3.3 基本用法

定义路由表

使用 @MaterialAutoRouter 注解定义路由表：

import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';

@MaterialAutoRouter(
  routes: <AutoRoute>[
    AutoRoute(page: HomePage, initial: true),
    AutoRoute(page: DetailsPage),
  ],
)
class $AppRouter {}

生成路由代码

运行以下命令生成路由代码：

flutter pub run build_runner build

使用路由

final _appRouter = AppRouter();

@override
Widget build(BuildContext context) {
  return MaterialApp.router(
    routerDelegate: _appRouter.delegate(),
    routeInformationParser: _appRouter.defaultRouteParser(),
  );
}

---

3.4 路由守卫（登录验证）

实现路由守卫

class AuthGuard extends AutoRouteGuard {
  final bool isLoggedIn;

  AuthGuard(this.isLoggedIn);

  @override
  void onNavigation(NavigationResolver resolver, StackRouter router) {
    if (isLoggedIn) {
      resolver.next(true); // 允许导航
    } else {
      router.push(LoginRoute()); // 跳转到登录页面
    }
  }
}

配置路由守卫

@MaterialAutoRouter(
  routes: <AutoRoute>[
    AutoRoute(page: HomePage, initial: true),
    AutoRoute(page: CartPage, guards: [AuthGuard]),
    AutoRoute(page: LoginPage),
  ],
)
class $AppRouter {}

---

4. 项目实战：实现一个多页面应用

4.1 功能需求

1. 首页：展示商品列表。
2. 商品详情页：展示商品详情。
3. 购物车页：需要登录后才能访问。

4.2 使用 go_router 实现

完整代码

bool isLoggedIn = false;

final GoRouter _router = GoRouter(
  initialLocation: '/',
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => HomePage(),
    ),
    GoRoute(
      path: '/details/:id',
      builder: (context, state) {
        final id = state.params['id']!;
        return DetailsPage(id: id);
      },
    ),
    GoRoute(
      path: '/cart',
      builder: (context, state) => CartPage(),
      redirect: (context, state) {
        if (!isLoggedIn) {
          return '/login';
        }
        return null;
      },
    ),
    GoRoute(
      path: '/login',
      builder: (context, state) => LoginPage(),
    ),
  ],
);

---

总结

1. go_router 和 auto_route 的对比

   • go_router：轻量级，适合快速开发。
   • auto_route：功能强大，适合复杂项目。

2. 高级功能

   • 嵌套路由：简化复杂页面结构。
   • 路由守卫：实现登录验证和权限控制。

3. 项目实战

   • 通过路由设计和守卫功能，构建一个多页面应用。