从前端路由到 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