从前端路由到 Android ARouter：观察者模式在不同平台的同一种落地

一、先给读者一个“统一结论”（很重要）

你可以在这一节一开头就点破：

不论是前端路由、Android 的 ARouter，还是 Flutter 的 go_router，
它们表面 API 完全不同，但底层解决的是同一件事：
当“导航状态”发生变化时，系统自动完成页面切换。
这背后，本质都是观察者模式。

二、前端路由（Vue / React Router）在干什么？

1️⃣ 前端路由的核心事实

在前端世界里，有一个天然的“被观察者”：

URL

• URL 变化

• 页面自动变化

• 开发者不需要手动“销毁/创建页面”

2️⃣ 一个典型前端路由表示例

const routes = [ { path: '/login', component: Login }, { path: '/order/:id', component: Order } ]

当 URL 从：

/login → /order/123

发生变化时：

• 路由系统监听到 URL 变化
• 匹配路由表
• 渲染新的组件

3️⃣ 用观察者模式语言解释

前端路由 = 浏览器 URL 变化 → 路由系统自动响应

三、前端的beforeEach是什么角色？

router.beforeEach((to, from, next) => { if (!isLogin && to.meta.auth) { next('/login') } else { next() } })

用模式语言解释：

• URL 即将变化

• 路由系统拦截这次变化

• 根据当前状态决定：

  • 放行

  • 或重定向

你可以总结一句：

beforeEach并不是“跳转逻辑”，
而是观察到路由状态变化前的一个统一决策点。

四、Android 的 ARouter 在干什么？

1️⃣ ARouter 的关键设计

@Route(path = "/order/detail") public class OrderDetailActivity extends Activity {}

ARouter.getInstance() .build("/order/detail") .navigation();

表面看是：

• path → Activity

但本质是：

• 路径字符串（路由状态）变化

• 路由系统查表

• 启动对应页面

2️⃣ ARouter 的拦截器（非常关键）

public class LoginInterceptor implements IInterceptor { @Override public void process(Postcard postcard, InterceptorCallback callback) { if (!isLogin()) { callback.onInterrupt(new Exception("need login")); } else { callback.onContinue(postcard); } } }

用观察者模式解释：

ARouter 把“页面跳转”从直接 startActivity
变成了路径驱动 + 集中治理。

五、Flutter go_router 放在同一条线上看

你前面已经讲过，这里只需要对齐抽象：

final router = GoRouter( refreshListenable: authState, redirect: ... );

一句话总结：

不同平台的路由系统，
都在监听某种“导航状态”的变化，
然后自动完成页面切换。

六、为什么三者都会“长成声明式路由”？

你可以在这一节点出演进原因：

• 页面数量变多

• 入口变多（深链 / 推送 / 外部唤起）

• 登录态 / 权限 / 灰度

• 命令式跳转失控

最终都会走向：

集中路由表 + 统一守卫 + 状态驱动

七、“认知升维总结”（非常重要）

当我把前端路由、Android ARouter、Flutter go_router
放在同一个视角下看时，
才发现它们并不是三套不同的技术，
而是同一个设计模式在不同平台上的自然实现。

理解这一点后，
学新框架不再是记 API，
而是识别模式。