对于Flutter路由基本概念及用法不了解的请学习Flutter Navigator路由传参_WEB前端李志杰的博客-CSDN博客_navigator传参。

Flutter中的默认导航分成两种，一种是命名的路由，一种是构建路由。在实际开发项目中我们大多数情况下都是使用命名的路由，关于路由的管理我们可以分为两部分，一部分是路由表的管理，另一部分是路由守卫管理。

一、路由表管理

我们可以在lib下新建一个routers/index.dart文件管理我们的路由表。

定义一个routeList集合，其类型应该为Map来存放我们的路由表。

import 'package:cyber_security/view/login/index.dart';import 'package:cyber_security/view/main/index.dart';import 'package:cyber_security/view/message_details/index.dart';import 'package:cyber_security/view/message_list/index.dart';import 'package:cyber_security/view/not_found/index.dart';import 'package:flutter/material.dart';Map routeList = {  "notFound": (content) => const NotFound(),  "login": (content) => const LoginPage(),  "main": (content) => const MainPage(),  "messageList": (content) => const MessageList(),  "messageDetails": (content) => const MessageDetails(),};

二、路由守卫管理

class MyApp extends StatelessWidget {  const MyApp({Key? key}) : super(key: key);  // This widget is the root of your application.  @override  Widget build(BuildContext context) {    return MaterialApp(      title: 'Flutter Demo',      theme: ThemeData( primarySwatch: Colors.blue,      ),      /// 默认路由      initialRoute: 'main',      /// 路由拦截器      onGenerateRoute: (RouteSettings settings) { final name = settings.name; var builder = routeList[name]; // 如果路由表中未定义，跳转到未定义路由页面 builder ??= (content) => const NotFou(); // 动态构建route return MaterialPageRoute(   builder: builder,   settings: settings, );      },    );  }}

三、路由跳转实现

可以通过Navigator.pushNamed或者Navigator.popAndPushNamed实现路由跳转，这两个方法分别接收三个参数分别为：上下文对象、跳转的目标路由别名、传递的参数（非必传）。

Navigator.pushNamed(context, 'messageList', arguments: {  // 传递的参数  'messageInfo': widget._messageInfo});

四、往期内容已全部收录在专栏中：

Flutter专栏_WEB前端李志杰的博客-CSDN博客

Vue专栏_WEB前端李志杰的博客-CSDN博客