前言：

路由的核心就是一个路由映射表，比如login  映射到 LoginPage,有了这样的映射，就可以根据名字去找寻对应的页面。

在Flutter 中，路由管理主要有两个类 Route 和 Navigator

一 Route

在Flutter 中，一个页面要想被理由统一管理，必须要包装为一个Route,

但是Route 本身是一个抽象类,所以是不能被实例化的

abstract class Route<T>

所以我们一般使用MaterialPageRoute，这个MaterialPageRoute也不是直接继承自Route的，

它是继承链条  PageRoute -> ModalRoute -> TransitionRoute - >OverlayRoute - > Route

对于安卓平台 ，打开一个页面是直接从底部滑动到顶部

对于苹果平台, 打开一个页面会从屏幕右侧滑动到屏幕的左侧

二 Navigator

1 基本使用

管理所有Route 的 widget，通过一个路由栈管理，也就是先进后出的结构。

  _jumpToDetail(BuildContext context) {Navigator.of(context).push(MaterialPageRoute(builder: (context) {return DetailPage();},));}

上面的方式有缺点 ，假如我们应用中存在多个地方都要访问商品详情页面，这样写的话，代码就会重复太多了。

这种时候就可以使用 

2 命名路由

以上的方式就是一个简单的跳转，但是一般的话 我们会通过在MaterialApp 里面配置route 的方式构建路由映射表

Map<String, WidgetBuilder> this.routes = const <String, WidgetBuilder>{},

这个routes 参数就是一个Map

例如如下的方式

routes: {"/detail": (context) => DetailPage()},

那么调用的时候直接可以push 就行了

_jumpToDetail(BuildContext context) {

Navigator.of(context).pushNamed("/detail");

}

 3 传递参数

使用一个钩子函数实现传递参数 onGenerateRoute ，settings.arguments

这个函数的调用时机：

onGenerateRoute 只有没在routes中注册的路由才会被回调。

所以我们可以在这里做一些操作

 onGenerateRoute: (settings) {if (settings.name == "/about") {// 这里return MaterialPageRoute(builder: (context) {return AboutPage(message: settings.arguments);},);}return null;},

为什么采用这种方式，因为在AboutPage 中定义的有参数，那么在routes定义的时候，没有办法传入初始化的参数，所以采用这种方式。

4 举例来说一个项目中的router.dart 文件

import 'package:flutter/material.dart';
import '../pages/tabs/tab.dart';import '../pages/tabs/home.dart';
import '../pages/tabs/category.dart';
import '../pages/tabs/user.dart';
import '../pages/tabs/cart.dart';
import '../pages/productList.dart';
import '../pages/productSearch.dart';
import '../pages/productDetail.dart';
import '../pages/login.dart';
import '../pages/login/registerFirst.dart';
import '../pages/ensureOrder/ensuerOrder.dart';
import '../pages/address/addressAdd.dart';
import '../pages/address/addressEdit.dart';
import '../pages/address/addressList.dart';
import '../pages/ensureOrder/choosePay.dart';//配置路由
final routes = {'/': (context) => Tabs(),'/home': (context) => HomePage(),'/category': (context) => CategoryPage(),'/user': (context) => UserPage(),'/cart': (context) => CartPage(),'/productSearch': (context) => ProductSearchPage(),'/productDetail': (context) => ProductDetailPage(),'/login': (context) => LoginPage(),'/ensureOrder': (context) => EnsureOrderpage(),'/registerFirst': (context) => RegisterFirstPage(),'/addressAdd': (context) => AddressAddPage(),'/addressEdit': (context) => AddressEditPage(),'/addressList': (context) => AddressListPage(),'/choosePay': (context) => ChoosePayPage(),'/productList': (context, {arguments}) =>ProductListPage(arguments: arguments)
};//固定写法
var onGenerateRoute = (RouteSettings settings) {
// 统一处理final String? name = settings.name;final Function pageContentBuilder = routes[name] as Function;if (pageContentBuilder != null) {if (settings.arguments != null) {
// 有参数的形式final Route route = MaterialPageRoute(builder: (context) =>pageContentBuilder(context, arguments: settings.arguments));return route;} else {
// 无参数的形式final Route route =MaterialPageRoute(builder: (context) => pageContentBuilder(context));return route;}}
};

在main中直接使用即可：

initialRoute: "/",

onGenerateRoute: onGenerateRoute,

5 onUnknownRoute

这个方法如名字一样 ,跳转的路由未找到就会走这个方法

onUnknownRoute: (settings) {return MaterialPageRoute(builder: (context) {return UnkonwnPage();},);},