Flutter路由管理插件angel_route的使用

angel_route 是一个强大的路由管理库，适用于Dart语言。它提供了类似于树形结构的路由系统，可以轻松导航，并且支持多种参数解析。无论是在服务器端还是客户端（如Flutter），都可以使用它来管理路由。

特性

• 支持树形路由结构。
• 提供参数解析功能（支持 int, double, 和 num）。
• 不依赖于特定框架，可以在任何应用中使用。
• 支持浏览器中的路由变化监听。

安装

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  angel_route: ^1.0.0

然后运行 flutter pub get 来安装依赖。

基本使用

1. 路由定义

我们可以使用 Router 来定义路由。以下是一个简单的示例：

import 'package:angel_route/angel_route.dart';

void main() {
  final router = Router();

  // 定义GET路由
  router.get('/home', () {
    return '欢迎来到首页！';
  });

  // 定义带有参数的路由
  router.get('/user/:id', (String id) {
    return '用户ID: $id';
  });

  // 自动解析参数类型
  router.get('/square_root/:id([0-9]+)', (int n) {
    return {'result': pow(n, 0.5)};
  });

  // 分组路由
  router.group('/admin', (router) {
    router.get('/settings', () {
      return '这是管理员设置页面。';
    });
  });

  // 启动监听
  router.listen();
}

代码说明：

• router.get() 定义了一个 GET 请求的路由。
• router.group() 可以将多个路由分组，方便管理。
• 参数可以通过正则表达式限制格式（如 :id([0-9]+) 表示只接受数字）。

2. 路由解析

angel_route 提供了 resolve 方法来解析路径并获取路由信息：

void main() {
  final router = Router();

  router.get('/about', () {
    return '关于我们页面。';
  });

  // 解析路径
  var result = router.resolve('/about');
  print(result.first.allParams); // 输出 {}
  print(result.first.route.path); // 输出 '/about'
}

代码说明：

• resolve 返回一个 RoutingResult 列表，包含匹配的路由信息。
• allParams 是一个 Map，存储了所有路由参数。

3. 在Flutter中的使用

在Flutter应用中，我们可以结合 BrowserRouter 来监听路由变化：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final router = BrowserRouter();

  @override
  void initState() {
    super.initState();

    // 监听路由变化
    router.onRoute.listen((route) {
      if (route != null) {
        print('当前路由: ${route.route.path}');
      } else {
        print('未找到匹配的路由');
      }
    });

    // 开始监听
    router.listen();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('angel_route 示例')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                router.navigate('/home');
              },
              child: Text('跳转到 /home'),
            ),
            ElevatedButton(
              onPressed: () {
                router.navigate('/about');
              },
              child: Text('跳转到 /about'),
            ),
          ],
        ),
      ),
    );
  }
}

代码说明：

• 使用 BrowserRouter 替换 Router，以便在Flutter中使用。
• navigate 方法用于手动触发路由跳转。
• onRoute 可以监听路由变化并执行相应逻辑。

高级用法

1. 路由分组与中间件

我们可以通过 group 方法对路由进行分组，并添加中间件：

router.group('/api', (router) {
  router.use((req, res, next) {
    print('API请求开始');
    next();
  });

  router.get('/users', () {
    return '这是用户列表。';
  });
});

2. 动态路由参数

支持动态参数解析，并限制参数格式：

router.get('/product/:id([0-9]+)', (int id) {
  return '产品ID: $id';
});