Flutter命名路由 #

一、路由表配置 #

1.1 基本配置 #

dart
MaterialApp(
  routes: {
    '/': (context) => HomePage(),
    '/detail': (context) => DetailPage(),
    '/settings': (context) => SettingsPage(),
  },
)

1.2 initialRoute #

dart
MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => HomePage(),
    '/login': (context) => LoginPage(),
  },
)

二、路由跳转 #

2.1 pushNamed #

dart
Navigator.pushNamed(context, '/detail');

2.2 pushReplacementNamed #

dart
Navigator.pushReplacementNamed(context, '/home');

2.3 popAndPushNamed #

dart
Navigator.popAndPushNamed(context, '/detail');

三、onGenerateRoute #

3.1 动态路由 #

dart
MaterialApp(
  onGenerateRoute: (settings) {
    switch (settings.name) {
      case '/detail':
        final id = settings.arguments as String;
        return MaterialPageRoute(
          builder: (context) => DetailPage(id: id),
        );
      default:
        return null;
    }
  },
)

Navigator.pushNamed(context, '/detail', arguments: '123');

四、总结 #

4.1 核心概念 #

概念 说明
routes 路由表
initialRoute 初始路由
onGenerateRoute 动态路由生成

4.2 下一步 #

让我们学习 路由传参

最后更新:2026-03-28