路由基础概念：从页面跳转说起

做 Flutter 开发这些年，我经常被问到：「路由不就是页面跳转吗？有什么好讲的？」

嗯，这话对了一半。页面跳转确实是路由最直观的体现，但路由体系远不止这么简单。今天我们就从最基础的概念开始，把路由这件事彻底聊透。

什么是路由？

路由（Route），说白了就是「页面切换的规则」。你想想看，用户点了一个按钮，从首页跳到了详情页——这个「怎么跳、跳到哪、跳完后能不能回来」的整套机制，就是路由。

在移动端开发里，路由通常包含三个核心要素：

• 页面标识：每个页面都有一个唯一的名字或路径
• 导航动作：push、pop、replace 这些操作
• 参数传递：页面之间怎么传数据

我在项目中遇到过不少新手，直接把路由理解成「跳转函数」。其实路由更像是一张地图，告诉你从 A 到 B 该怎么走，路上有哪些关卡，走错了能不能回头。

为什么需要路由？

你可能会问：「我直接用 Navigator.push 不就行了？搞那么复杂干嘛？」

说实话，小项目确实可以这么干。但一旦项目上了规模，你就会发现：

• 页面多了，跳转逻辑散落在各个地方，维护起来想哭
• 深层嵌套的页面，返回时状态丢失了
• 需要统一处理登录拦截、权限校验，结果每个页面都得写一遍
• 想做个页面跳转动画，改起来牵一发动全身

这些都是我踩过的坑。所以后来我养成了一个习惯：不管项目大小，先搭好路由框架。这就像盖房子，地基打好了，后面怎么改都不慌。

Flutter 中的路由体系概述

Flutter 的路由体系，其实分成了三个层次。我习惯把它们比作「手动挡、自动挡和智能驾驶」：

层次	代表方案	特点
基础路由	Navigator.push/pop	手动控制，灵活但代码分散
命名路由	Navigator.pushNamed	集中管理，适合中小项目
高级路由	GoRouter、Beamer 等	声明式、支持深度链接、Web 友好

基础路由，就是最原始的 Navigator.push。你直接 new 一个页面，push 进去。简单粗暴，但每个页面跳转都得写一遍 new 的代码。

// 基础路由示例
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => DetailPage(id: 123)),
);

命名路由稍微进了一步。你把所有页面注册到一个路由表里，跳转时只需要传个名字。这样跳转逻辑集中了，但参数传递还是有点麻烦。

// 命名路由示例
// 先在 MaterialApp 中注册
routes: {
  '/detail': (context) => DetailPage(),
}

// 跳转时
Navigator.pushNamed(context, '/detail');

高级路由方案，比如 GoRouter，是我现在最常用的。它用声明式的方式定义路由，支持路径参数、嵌套路由、重定向、动画配置……几乎你能想到的，它都帮你处理好了。

// GoRouter 示例
final router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => HomePage(),
    ),
    GoRoute(
      path: '/detail/:id',
      builder: (context, state) => DetailPage(
        id: state.pathParameters['id']!,
      ),
    ),
  ],
);

路由的生命周期

这一点很多人会忽略。路由不是「跳过去就完了」，它有自己的生命周期：

• 初始化：页面被创建，接收参数
• 激活：页面显示在屏幕上
• 暂停：页面被覆盖（比如弹出了对话框）
• 恢复：页面重新回到前台
• 销毁：页面被 pop 掉，释放资源

我记得有一次，一个同事在页面销毁时忘记取消网络请求，结果页面关了还在回调里更新 UI，直接崩溃。嗯，这就是没理解路由生命周期的代价。

小结

路由基础概念，说白了就是三件事：怎么跳、怎么传参、怎么管理页面栈。别小看这些基础，后面所有的架构设计都是在这个地基上盖起来的。

下一章，我们会深入 Navigator 的源码，看看 Flutter 到底是怎么管理这些页面的。到时候你会发现，原来路由的底层实现，比想象中要优雅得多。

---

公众号:蓝海资料掘金营，微信deep3321