用前端的角度看flutter路由

路由在 web 的单页应用有涉及，被用来管理页与页之间的跳转和参数传递，比如 vue/react。flutter 中的路由也有借鉴前端的思想。

flutter 的路由分为两种，一种是直接注册，不能传递参数。另一种要自己构造实例，可以传递参数。路由分为静态路由和动态路由。

只对静态路由介绍！

静态路由

在 MaterialApp 风格的 APP 里，main.dart 是程序的入口文件，可以在里面定义路由列表。

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter路由',
      routes: {
        '/page1': (context) => Page1(),
        '/page2': (context) => Page2()
      },
      onUnknownRoute: (RouteSettings setting) {
        String name = setting.name;
        print("未匹配到路由:$name");
        return new MaterialPageRoute(builder: (context) {
          return new ErrorPage();
        });
      },
      home: Page1()
    );
  }
}

这段代码中：

title: 导航栏标题
routers: 路由表。page1,page2 都是我们定义的静态路由。routes 的本质是 Map。
onUnknownRoute: 当跳转到一个不存在的路由时就去到这里定义的 ErrorPage。
home: APP 启动默认的路由。

PUSH 跳转

pushNamed

在 vue.js 里，vue-router 的使用是：

this.$router.push({
  name: "page1"
});

指定 name 唯一标识，既可以跳转到相应的路由。

那么在 flutter 里，我们可以通过pushNamed跳转。

Navigator.pushNamed(context, "page2");

如果想要带参数的跳转，直接在后面加上 arguments。

Navigator.pushNamed(
    context,
    "page2",
    arguments: {
      "name": 'hello'
    });

那么，获取路由参数可以通过：

var args=ModalRoute.of(context).settings.arguments;

pushReplacementNamed

看到名字这么长，其实他和 vue-router 的 replace 一样的用法。简单来说就是：替换。关闭当前路由，跳转到另一个路由。

Navigator.pushReplacementNamed(context, "page2");

pushNamedAndRemoveUntil

应用场景：打开一个 APP 后，会出现 APP 启动页，然后进入欢迎页，最后才进入 APP 首页。这种情况下，如果用户一直按返回，是应该从首页退出 APP，而不是会去到欢迎页和启动页了。

Navigator.pushNamedAndRemoveUntil(
  context,
  '/LoginScreen',
  (Route<dynamic> route) => false)
  );

POP 后退

有一些业务场景就是：A 页面跳转到 B 页面，在 B 页面进行了操作后要把结果传给 A 界面。

这个时候需要使用带参数返回的路由。

Navigator.pop(context, "我这一页的数据");

获取参数也是通过：

var args=ModalRoute.of(context).settings.arguments;

类的解释

Route

一个应用程序抽象的屏幕或页面,在移动开发中通常用来表示移动应用的页面（Page）
PageRoute

一个抽象类，表示占有整个屏幕空间的一个模态路由页面，它还定义了路由构建及切换时过渡动画的相关接口及属性。
MaterialPageRoute

继承自 PageRoute 类，是 Material 组件库的一个 Widget，它可以针对不同平台，实现与平台页面切换动画风格一致的路由切换动画。
Navigator

Flutter 应用开发中的一个路由管理的 widget，它通过一个栈来管理一个路由 widget 集合。Navigator 提供了一系列方法来管理路由栈，我们可以使用 push 和 pop 两个操作来进行页面的入栈和出栈。
ModalRoute

可以跟之前的路由打交道的类，它包含了整个 Navigator 类。
PageRouteBuilder

自定义路由
RouteSettings

包含路由的配置信息，如路由名称、是否初始路由（首页）。