mio_web_router 是一个用于 Flutter Web 应用的路由管理插件，它可以帮助开发者更方便地处理 Web 应用中的路由和导航。以下是如何使用 mio_web_router 插件的基本步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 mio_web_router 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  mio_web_router: ^1.0.0  # 请使用最新版本

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

2. 初始化路由

在你的 Flutter 应用中，初始化 mio_web_router 并定义路由。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Web Router Example',
      // 使用 MioWebRouter 作为路由生成器
      onGenerateRoute: MioWebRouter.generateRoute,
      initialRoute: '/',
    );
  }
}

3. 定义路由

在 MioWebRouter 中定义你的路由。你可以使用 MioWebRouter 的 routes 属性来定义路由。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Web Router Example',
      onGenerateRoute: MioWebRouter.generateRoute,
      initialRoute: '/',
    );
  }
}

class MioWebRouter {
  static Route<dynamic> generateRoute(RouteSettings settings) {
    switch (settings.name) {
      case '/':
        return MaterialPageRoute(builder: (_) => HomePage());
      case '/about':
        return MaterialPageRoute(builder: (_) => AboutPage());
      case '/contact':
        return MaterialPageRoute(builder: (_) => ContactPage());
      default:
        return MaterialPageRoute(builder: (_) => NotFoundPage());
    }
  }
}

4. 创建页面

创建你在路由中定义的页面组件。

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(child: Text('Welcome to the Home Page!')),
    );
  }
}

class AboutPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('About')),
      body: Center(child: Text('About Us')),
    );
  }
}

class ContactPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Contact')),
      body: Center(child: Text('Contact Us')),
    );
  }
}

class NotFoundPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('404')),
      body: Center(child: Text('Page Not Found')),
    );
  }
}

5. 导航

使用 Navigator 或 MioWebRouter 提供的方法进行导航。

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Welcome to the Home Page!'),
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, '/about');
              },
              child: Text('Go to About Page'),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, '/contact');
              },
              child: Text('Go to Contact Page'),
            ),
          ],
        ),
      ),
    );
  }
}

6. 处理 URL 参数

mio_web_router 也支持处理 URL 参数。你可以在路由定义中解析参数。

class MioWebRouter {
  static Route<dynamic> generateRoute(RouteSettings settings) {
    switch (settings.name) {
      case '/':
        return MaterialPageRoute(builder: (_) => HomePage());
      case '/about':
        return MaterialPageRoute(builder: (_) => AboutPage());
      case '/contact':
        return MaterialPageRoute(builder: (_) => ContactPage());
      case '/user':
        final args = settings.arguments as Map<String, String>;
        return MaterialPageRoute(builder: (_) => UserPage(userId: args['userId']));
      default:
        return MaterialPageRoute(builder: (_) => NotFoundPage());
    }
  }
}

class UserPage extends StatelessWidget {
  final String userId;

  UserPage({required this.userId});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('User Profile')),
      body: Center(child: Text('User ID: $userId')),
    );
  }
}

在导航时传递参数：

Navigator.pushNamed(
  context,
  '/user',
  arguments: {'userId': '123'},
);

7. 处理 404 页面

如果用户访问了一个不存在的路由，你可以显示一个 404 页面。

class MioWebRouter {
  static Route<dynamic> generateRoute(RouteSettings settings) {
    switch (settings.name) {
      case '/':
        return MaterialPageRoute(builder: (_) => HomePage());
      case '/about':
        return MaterialPageRoute(builder: (_) => AboutPage());
      case '/contact':
        return MaterialPageRoute(builder: (_) => ContactPage());
      default:
        return MaterialPageRoute(builder: (_) => NotFoundPage());
    }
  }
}

8. 运行应用

现在你可以运行你的 Flutter Web 应用，并使用 mio_web_router 来管理路由和导航。

flutter run -d chrome