Flutter浏览器路由管理插件browser_routes的使用

Flutter浏览器路由管理插件browser_routes的使用

在单页应用程序（SPA）中使用浏览器路由进行页面导航。此插件支持以下功能：

  1. 普通路径：/my/example/page
  2. 命名路径变量：/hello/:name
  3. 可选命名路径变量：/hello/:name/:?andGuest
  4. 带通配符的路径：/api/*，用于动态内容或路由到子系统

传入的URL首先按段长度进行比较。定义相等长度的路由将按照上面定义的顺序解析。

使用方法

设置一个简单的Dart Web应用：

stagehand web-simple

编辑 pubspec.yaml 文件：

dependencies:
  browser_routes: ^1.0.0

编辑 web/main.dart 文件：

import 'package:browser_routes/browser_routes.dart';

// 验证函数
bool authOk(void Function() f) {
  f();
  return true;
}

void main() {
  // 创建HashRouter实例
  final router = HashRouter(onError: (Url url) => 
    authOk(() => print('${url.code}: $url'))
  );

  // 注册路由
  final hello_route = router.register('hello/:name', 'Hello World', (Url url) => 
    authOk(() => print("hello '${url.params['name']}'"))
  );

  // 忽略的路由
  final home_route = router.register('/', 'Home', (Url url) => 
    authOk(() => print('home screen'))
  );

  // 导航到指定路由
  hello_route.navigateTo(params: {'name': 'Peter'});
}

运行开发服务器：

webdev serve

导航到 http://localhost:8080/#/hello/Brian

不带 # 的路径

如果使用 Router() 而不是 HashRouter()，请配置Web服务器以在所有路径下都返回 index.html。

Nginx示例：

location / {
      try_files $uri $uri/ /index.html;
}

测试

运行测试：

pub run test -p chrome test/browser_routes_test.dart 
pub run test -p chrome test/browser_routes_test_async.dart

特性和错误报告

如需提交功能请求或错误报告，请访问 GitHub Issue Tracker。

示例代码

import 'package:browser_routes/browser_routes.dart';

// 验证函数
bool authOk(void Function() f) {
  f();
  return true;
}

void main() {
  // 创建HashRouter实例
  final router = HashRouter(onError: (Url url) => authOk(() => print('${url.code}: $url')));

  // 注册路由
  final hello_route = router.register('/', 'hello/:name', (Url url) => 
    authOk(() => print("hello '${url.params['name']}'"))
  );

  // 忽略的路由
  final home_route = router.register('/', 'Home', (Url url) => 
    authOk(() => print('home screen'))
  );

  // 导航到指定路由
  hello_route.navigateTo(params: {'name': 'Peter'});
}

更多关于Flutter浏览器路由管理插件browser_routes的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter浏览器路由管理插件browser_routes的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


browser_routes 是一个用于 Flutter Web 应用的路由管理插件，它允许你在浏览器中管理 URL 路径，并与 Flutter 应用的路由系统进行集成。通过使用 browser_routes，你可以轻松地在 Flutter Web 应用中实现基于 URL 的路由导航。

安装 browser_routes

首先，你需要在 pubspec.yaml 文件中添加 browser_routes 依赖：

dependencies:
  flutter:
    sdk: flutter
  browser_routes: ^1.0.0  # 请检查最新版本

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

基本用法

  1. 初始化 BrowserRoutes

    在你的 main.dart 文件中，初始化 BrowserRoutes，并将其与你的 MaterialApp 或 CupertinoApp 集成。

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

void main() {
  final browserRoutes = BrowserRoutes(
    routes: {
      '/': (context) => HomePage(),
      '/about': (context) => AboutPage(),
      '/contact': (context) => ContactPage(),
    },
  );

  runApp(MyApp(browserRoutes: browserRoutes));
}

class MyApp extends StatelessWidget {
  final BrowserRoutes browserRoutes;

  MyApp({required this.browserRoutes});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Web App',
      navigatorKey: browserRoutes.navigatorKey,
      onGenerateRoute: browserRoutes.onGenerateRoute,
      initialRoute: browserRoutes.initialRoute,
    );
  }
}

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

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

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

  2. 导航到不同页面

    你可以使用 Navigator.pushNamed 或 Navigator.pushReplacementNamed 来导航到不同的页面，browser_routes 会自动更新浏览器的 URL。

    Navigator.pushNamed(context, '/about');

  3. 处理动态路由

    browser_routes 也支持动态路由。你可以在路由路径中使用参数，并在页面中获取这些参数。

    final browserRoutes = BrowserRoutes(
  routes: {
    '/': (context) => HomePage(),
    '/user/:id': (context) => UserPage(),
  },
);

class UserPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final userId = BrowserRoutes.of(context).params['id'];
    return Scaffold(
      appBar: AppBar(title: Text('User $userId')),
      body: Center(child: Text('User $userId Page')),
    );
  }
}

    在导航时，你可以传递动态参数：

    Navigator.pushNamed(context, '/user/123');

  4. 处理查询参数

    browser_routes 还支持查询参数。你可以在 URL 中添加查询参数，并在页面中获取这些参数。

    class AboutPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final queryParams = BrowserRoutes.of(context).queryParams;
    final name = queryParams['name'] ?? 'Unknown';
    return Scaffold(
      appBar: AppBar(title: Text('About')),
      body: Center(child: Text('Hello, $name!')),
    );
  }
}

    在导航时，你可以传递查询参数：

    Navigator.pushNamed(context, '/about?name=John');
回到顶部