路由详解

本教程将向你详解 MPFlutter 开发 Web 应用时，路由的用法。

路由的内置实现#

不同于 React / Vue.js 等库需要额外添加路由库才能实现路由，MPFlutter 是自带路由能力的。

MPFlutter Web 应用的路由能力是与 Flutter Navigator API 深度绑定的。

MPFlutter 的路由实现是 QueryString，例如页面路径为 /article，参数 id 为 123 的页面，会使用以下 url 表示。

http://127.0.0.1:9898/index.html?route=/article&id=123

目前我们暂未提供自定义路由 URL 格式的能力

定义路由#

开发者可以在 MPApp 中定义路由以及路由的具体实现 Widget。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MPApp(
      title: 'MPFlutter Demo',
      color: Colors.blue,
      routes: {
        '/': (context) => MyHomePage(),
        '/second': (context) => MySecondPage(),
      },
      navigatorObservers: [MPCore.getNavigationObserver()],
    );
  }
}

在这个例子中，我们定义了两个路由，/ 和 /second，其中 / 是必须的，它是首页。

(context) => MySecondPage() 表示，MySecondPage 这个 Widget 会响应 /second，

跳转页面#

开发者可以使用 Navigator API 跳转至指定路由页面。

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MPScaffold(
      name: 'Template',
      body: Center(
        child: GestureDetector(
          onTap: () {
            Navigator.of(context).pushNamed('/second');
          },
          // child: ...
        ),
      ),
    );
  }
}

带参跳转以及获取参数#

开发者也可以使用 Navigator API 带参的方式跳转至指定路由页面，其中 arguments 只接受可序列化的 JSON 打平对象。

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MPScaffold(
      name: 'Template',
      body: Center(
        child: GestureDetector(
          onTap: () {
            Navigator.of(context).pushNamed(
              '/second',
              arguments: {'id': '123'},
            );
          },
          // child: ...
        ),
      ),
    );
  }
}

在下一页使用以下方式获取从上一页传过来的参数。

class MySecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final settings = ModalRoute.of(context)?.settings.arguments;
    String? id;
    if (settings is Map) {
      id = settings["id"] is String ? settings["id"] : null;
    }
    //return ...;
  }
}

反向传参#

MPFlutter 支持从下一页反向传参至上一页，你可以通过 await 的方式等候下一页的回传参数。

await Navigator.of(context).pushNamed(
    '/second',
    arguments: {'id': '123'},
);

回传

Navigator.of(context).pop('321');