从前端路由到 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️⃣ 用观察者模式语言解释

角色	对应
Subject	URL / history
Observer	Router
notify	URL change
update	重新渲染组件

前端路由 = 浏览器 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);
        }
    }
}

用观察者模式解释：

角色	对应
Subject	路由请求（Postcard）
Observer	Interceptor
notify	navigation()
update	是否放行 / 中断

ARouter 把"页面跳转"从 直接 startActivity

变成了 路径驱动 + 集中治理。

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

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

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

抽象	前端	ARouter	go_router
路由状态	URL	path	location
被观察者	history	路由请求	authState / location
观察者	Router	Interceptor	GoRouter
守卫	beforeEach	Interceptor	redirect
页面切换	组件渲染	Activity	Widget

一句话总结：

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

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

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

• 页面数量变多

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

• 登录态 / 权限 / 灰度

• 命令式跳转失控

最终都会走向：

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

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

当我把前端路由、Android ARouter、Flutter go_router

放在同一个视角下看时，

才发现它们并不是三套不同的技术，

而是同一个设计模式在不同平台上的自然实现。

理解这一点后，

学新框架不再是记 API，

而是识别模式。