路由(Route)在移动开发中通常指页面（Page），这跟web开发中单页应用的Route概念意义是相同的，Route在Android中通常指一个Activity，在iOS中指一个ViewController。所谓路由管理，就是管理页面之间如何跳转，通常也可被称为导航管理。Flutter中的路由管理和原生开发类似，无论是Android还是iOS，导航管理都会维护一个路由栈，路由入栈(push)操作对应打开一个新页面，路由出栈(pop)操作对应页面关闭操作，而路由管理主要是指如何来管理路由栈。

Flutter 路由管理中有两个非常重要的概念：

Route：路由是应用程序页面的抽象，对应 Android 中 Activity 和 iOS 中的 ViewController，由 Navigator 管理。
Navigator：Navigator 是一个组件，管理和维护一个基于堆栈的历史记录，通过 push 和 pop 进行页面的跳转。

Flutter 中给我们提供了两种配置路由跳转的方式：1、基本路由 2、命名路由

MaterialPageRoute

MaterialPageRoute继承自PageRoute类，PageRoute类是一个抽象类，表示占有整个屏幕空间的一个模态路由页面，它还定义了路由构建及切换时过渡动画的相关接口及属性。MaterialPageRoute 是Material组件库提供的组件，它可以针对不同平台，实现与平台页面切换动画风格一致的路由切换动画：

对于Android，当打开新页面时，新的页面会从屏幕底部滑动到屏幕顶部；当关闭页面时，当前页面会从屏幕顶部滑动到屏幕底部后消失，同时上一个页面会显示到屏幕上。
对于iOS，当打开页面时，新的页面会从屏幕右侧边缘一致滑动到屏幕左边，直到新页面全部显示到屏幕上，而上一个页面则会从当前屏幕滑动到屏幕左侧而消失；当关闭页面时，正好相反，当前页面会从屏幕右侧滑出，同时上一个页面会从屏幕左侧滑入。

MaterialPageRoute 部分定义如下：

MaterialPageRoute({
  WidgetBuilder builder,
  RouteSettings settings,
  bool maintainState = true,
  bool fullscreenDialog = false,
  //fullscreenDialog 是一种比较特殊的页面打开方式，本质上会从底部弹起类似一个 Dialog 对话框，但是是全屏的，
})

builder 是一个WidgetBuilder类型的回调函数，它的作用是构建路由页面的具体内容，返回值是一个widget。我们通常要实现此回调，返回新路由的实例。
settings 包含路由的配置信息，如路由名称、是否初始路由（首页）。
maintainState：默认情况下，当入栈一个新路由时，原来的路由仍然会被保存在内存中，如果想在路由没用的时候释放其所占用的所有资源，可以设置maintainState为false。
fullscreenDialog 表示新的路由页面是否是一个全屏的模态对话框，本质上会从底部弹起类似一个 Dialog 对话框，在iOS中，如果fullscreenDialog为true，新页面将会从屏幕底部滑入（而不是水平方向）。

如果想自定义路由切换动画，可以自己继承PageRoute来实现，我们将在后面介绍动画时，实现一个自定义的路由组件。

Navigator

Navigator是一个路由管理的组件，它提供了打开和退出路由页方法。Navigator通过一个栈来管理活动路由集合。通常当前屏幕显示的页面就是栈顶的路由。Navigator提供了一系列方法来管理路由栈。

Navigator类中第一个参数为context的静态方法都对应一个Navigator的实例方法，比如：

Navigator.push(BuildContext context, Route route);
//等同于
Navigator.of(context).push(Route route)

push 跳转

将给定的路由入栈（即打开新的页面），返回值是一个Future对象，用以接收新路由出栈（即关闭）时的返回数据。

//定义
static Future<T> push<T extends Object>(BuildContext context, Route<T> route) {
  return Navigator.of(context).push(route);
}
//A 页面
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) {
      return SearchPage({'q': 'book'});
    },
  ),
).then((value) {
  print('回传参数 $value'); //回传参数 {a: 1}
});
// B 页面
Navigator.pop(context, {'a': 1});
//push(pushNamed) 跳转页面
//pushReplacement(pushReplacementNamed) 替换页面（先跳到新页面，再销毁当前页面）
//PushAndRemove 跳转某个页面，并清除所有历史（popAndPushNamed是先退出销毁，再进入）
//pushAndRemoveUntil(pushNamedAndRemoveUntil)

左图：假如位于A页面时，路由堆栈中只有A，点击按钮跳转到B页面，路由堆栈中有 B 和 A，且 B 处于栈顶。
右图：点击 B 页面的按钮返回到 A 页面。

基本路由 - 图1 基本路由 - 图2

pushReplacement 替换

先跳转到新页面，再销毁刚才的页面。（进入 -> 销毁）

popAndPushNamed 这个方法和pushReplacement很相近，都是开启一个新的页面并且销毁之前的页面，只是在逻辑上的执行顺序不一样。（退出 -> 销毁 -> 进入） popAndPushNamed是退出当前页面并且将新的页面放到它原来的位置上，所以在视觉效果上是先退出再进入

//定义
static Future<T> pushReplacement<T extends Object, TO extends Object>(
  BuildContext context, 
  Route<T> newRoute, 
  { TO result },
) {
  return Navigator.of(context).pushReplacement<T, TO>(newRoute, result: result);
}
Navigator.pushReplacement(
  context, 
    MaterialPageRoute(
    builder: (context) {
      return SearchPage({'q': 'book'});
    },
  ),
)

pushAndRemoveUntil 跳转并删除先前路由

先将给定路由推送到Navigator，再删除先前的路由，一直到该函数的参数 predicate 返回true为止。
如果 predicate 一直返回false，则会清空先前的所有路由。

//定义
static Future<T> pushAndRemoveUntil<T extends Object>(
  BuildContext context, 
  Route<T> newRoute, 
  RoutePredicate predicate,
) {
  return Navigator.of(context).pushAndRemoveUntil<T>(newRoute, predicate);
}
Navigator.pushAndRemoveUntil(
  context,
  MaterialPageRoute(
    builder: (context) {
      return SearchPage({'q': 'book'});
    },
  ),
  (route) => false,
)

pop 后退

bool pop(BuildContext context, [ result ])
将栈顶路由出栈，result为页面关闭时返回给上一个页面的数据。

//定义
static void pop<T extends Object>(BuildContext context, [T result]) {
  Navigator.of(context).pop<T>(result);
}
//返回上一个页面
Navigator.of(context).pop();
Navigator.pop(context);
// Navigator.pop接受一个可选的(第二个)参数result。
// 如果我们返回结果，它将返回到一个Future到上一个页面中！
Navigator.pop(context, '回传参数');
//pop
//popAndPushNamed
//这个方法和pushReplacement很相近，都是开启一个新的页面并且销毁之前的页面，只是在逻辑上的执行顺序不一样，
//popAndPushNamed是退出当前页面并且将新的页面放到它原来的位置上，所以在视觉效果上是先退出再进入

Navigator 还有很多其它方法，如Navigator.replace、Navigator.popUntil等，详情请参考API文档或SDK源码注释，在此不再赘述。

popUtil 后退并删除先前路由

反复执行 pop 直到该函数的参数 predicate 返回true为止。
如果 predicate 一直返回false，将黑屏或者退出应用程序。

//定义
static void popUntil(BuildContext context, RoutePredicate predicate) {
  Navigator.of(context).popUntil(predicate);
}
//黑屏或者退出应用程序
Navigator.popUntil(context, (route) => false);
//一直退到命名路由列表中的某个页面
Navigator.of(context).popUntil(ModalRoute.withName('/test'));
//返回根路径
Navigator.popUntil(context, ModalRoute.withName('/'));    
Navigator.of(context).popUntil((r) => r.settings.isInitialRoute);
Navigator.popUntil(context, (route) {
  print(route.settings); //RouteSettings("/", null)
  print(route.settings.name); //"/"
  print(route.settings.arguments); //null
  return true;
});

maybePop 后退

当路由栈中只有一个页面时，调用pop后，路由栈为空，没有可显示的页面，应用程序就会黑屏或者退出。

此时可以使用 maybePop，和 pop 唯一的区别就是：
maybePop 只在路由堆栈有可弹出路由时才会弹出路由。

Navigator.of(context).maybePop({'a': 1});
Navigator.maybePop(context, {'a': 1});

canPop 是否能后退

判断当前是否可以 pop。当路由栈中只有一个页面时，返回false。

if(Navigator.of(context).canPop()){
  Navigator.of(context).pop();
}

removeRoute

从Navigator中删除路由，同时执行Route.dispose操作。

removeRouteBelow

从Navigator中删除路由，同时执行Route.dispose操作，要替换的路由是传入参数anchorRouter里面的路由。

replace

将Navigator中的路由替换成一个新路由。

replaceRouteBelow

将Navigator中的路由替换成一个新路由，要替换的路由是是传入参数anchorRouter里面的路由。

参数传递

很多时候，在路由跳转时我们需要带一些参数，比如打开商品详情页时，我们需要带一个商品id，这样商品详情页才知道展示哪个商品信息；又比如我们在填写订单时需要选择收货地址，打开地址选择页并选择地址后，可以将用户选择的地址返回到订单页等等。下面我们通过一个简单的示例来演示新旧路由如何传参。

比如我们想从 home 页面跳转到 search 页面，再返回 home 页面。

通过构造函数传参

A页面

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SearchPage(title: '搜索')),
).then((val) {
  print('我是B页面返回时传递的参数 -- ${val}');
});

B页面

import "package:flutter/material.dart";
class SearchPage extends StatelessWidget {
  //接收上一个页面传递来的参数
  final title;
  SearchPage({key, @required this.title}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Text('我是 $title 页面'),
      ),
      floatingActionButton: FloatingActionButton(
        child: Text('返回'),
        onPressed: () {
          Navigator.pop(context, '我是回传参数');
        },
      ),
    );
  }
}

通过 RouteSettings/ModalRoute 传参

RouteSettings 就是路由的基本信息，arguments 可以用来存储路由相关的参数字段。

A页面

// RouteSettings 定义
RouteSettings({this.name, this.arguments });
//跳转
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => SearchPage(),
    settings: RouteSettings(
      arguments: { 'id': 1 },    //参数
    ),
  ),
).then((val) {
  print('我是回传参数 -- ${val}');
});

B页面

import "package:flutter/material.dart";
class SearchPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 通过 ModalRoute 获取参数
    final args = ModalRoute.of(context).settings.arguments;
    print(args); //args => {id: 1}
    return null;
  }
}

基本路由