App.K12.Student.Miniapp_Flutter/docs/demos/router_demo.md

【Demo】路由导航：应用入口（RouterApp）

源文件：lib/pages/demo/router_demo.dart ｜ 分类：路由 一句话：一个只负责"组装"的入口文件 —— 注册路由表、指定首页。

---

一、这个 Demo 解决什么问题

把路由导航 Demo 的三个页面（首页 / 详情页 / 选择器页）组装成一个可运行的应用。 演示的是组件化结构 + 命名路由表：

lib/pages/demo/router_demo.dart      → 应用入口（只组装，不写页面）
lib/pages/demo/router_home_page.dart → 首页（三个跳转按钮）
lib/pages/demo/detail_page.dart      → 详情页（接收参数）
lib/pages/demo/picker_page.dart      → 选择器页（pop 带值返回）

对照 Vue：RouterApp ≈ main.ts + router/index.ts；每个页面一个文件 ≈ views/ 目录。

---

二、怎么运行 / 演示内容

runApp(const RouterApp());

首页三个按钮，演示三种跳转姿势：

1. push + 构造函数传参；
2. push 选择器并 await 接收 pop 返回的结果；
3. pushNamed 命名路由 + arguments 传参。

---

三、核心知识点（新手向）

1. 命名路由表

MaterialApp(
  title: '路由导航 Demo',
  theme: ThemeData(colorSchemeSeed: const Color(0xFF3B82F6)),
  // 命名路由表：name -> 页面构造（详情页在这里注册）
  routes: {
    '/detail': (context) => const DetailPage(),
  },
  home: const RouterHomePage(),
)

• 路由名规范：/xxx 开头，如 /detail、/user/info；
• 注册后才能用 Navigator.pushNamed(context, '/detail')；
• home 是应用启动后的第一个页面（相当于 Vue 的默认路由）。

2. 命名规范

内容	规范
文件名	snake_case（小写下划线）：router_home_page.dart
类名	PascalCase：RouterHomePage
引入	跨文件用 import
文件组织	每个公开类一个文件

---

四、关键代码剖析

class RouterApp extends StatelessWidget {
  const RouterApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '路由导航 Demo',
      theme: ThemeData(colorSchemeSeed: const Color(0xFF3B82F6)),
      routes: {
        '/detail': (context) => const DetailPage(),
      },
      home: const RouterHomePage(),
    );
  }
}

---

五、踩坑记录

1. 入口文件只负责组装，别在里面堆业务代码——页面跳转见 router_home_page.md；
2. 命名路由的 arguments 是 dynamic，详情页取值要判空强转（见 detail_page.md）；
3. 真实项目路由更复杂（嵌套/守卫/转场），用 go_router 或 auto_route 包，本项目 demo 用原生 Navigator 讲清原理。

---

六、扩展思考

• 三种跳转姿势的详细讲解见 router_home_page.md；
• 参数接收的两种方式见 detail_page.md；
• 真实项目里 MaterialApp 在 lib/main.dart，路由表在 core/router/ 或 go_router 的配置里——原理与本页一致。