Vue Router（MPA）

本示例让 Vue Router 运行在 Sparkling 导航之上，从而用一份路由配置驱动多个原生 Lynx 页面之间的导航 —— 即多页（MPA）模型。

它基于 sparkling-history：一个与框架无关的 shim，在 Sparkling 的 router.open / router.close 之上实现了 Vue Router 的 history 契约。

与 VueLynx 的视图内路由不同

VueLynx 通过 createMemoryHistory 在单个 LynxView 内（同一个 JS heap）构建 SPA。本示例正相反：每个页面是一个独立的 Lynx 容器、拥有各自的 JS heap，Vue Router 驱动它们之间的原生导航。这些 heap 不共享内存 —— 仅靠一份构建期生成的路由清单相互连接。

堆内导航（网页预览中可实时运行）

main bundle 拥有两个路由 / 与 /features。在两者间切换是发生在同一个 heap 内的普通 Vue Router 过渡，不涉及原生桥，因此可在下方的网页预览中实时运行。点击 Features （或页内按钮），可见路由在不打开新页面的情况下发生变化。

这一点超越了其他示例

Sparkling 的其他网页预览只渲染 UI —— 其原生调用在浏览器中是失效的。而这里堆内的路由过渡在网页上确实可用，因为这一部分是纯粹的 Vue Router。

动态路由（`users` bundle）

users bundle 拥有 /users 与动态的 /users/:id。点击某个用户是带路由参数的堆内导航，完全由该 bundle 自己的 router 解析。此预览从该 bundle 自身的默认路由（/users）启动。

跨页导航（MPA —— 下方可实时体验）

当 router.push 解析到另一个 bundle 拥有的路由（依据路由清单）时，shim 会将其转发到 router.open，从而压入一个新的原生容器。上一个页面仍存活于其下方，与原生导航栈完全一致。

上方的 <Go> 预览一次只渲染一个 bundle、且没有原生桥，所以跨页导航跑不起来。下方这个实时预览不同：它运行 Sparkling web shell——为每个容器堆叠一个 <lynx-view>、提供 spkPipe 方法桥、并安装 RouterWebHost——因此 router.open 会真的在浏览器里打开一个新容器。点击 push('/users'),可见第二个容器压栈,顶部的 depth 变为 1,系统返回手势会弹出它。

Live MPA preview · Sparkling web shellvue-router-mpa

Loading preview…

你也可以在任意 <Go> 预览上扫描二维码,在（已集成 Sparkling 的）Lynx Explorer 中打开, router.open 会原生运行。

为何

<Go> 预览跨不了页,而这个可以堆内导航是卡片自身 JS heap 内的纯 Vue Router —— 没有原生调用 —— 因此在任何预览里都能跑。跨页导航调用 router.open,需要一个原生 host。sparkling-navigation 暴露了可插拔的 RouterWebHost,但 go-web 的 <Go> 预览目前没有暴露在其 <lynx-view> 上注册该 host (或 spkPipe 桥)的钩子。而上方嵌入的 web shell 拥有它自己(iframe)的整个页面,会自行安装该 host 与桥——所以跨页导航在那里可用。

映射关系

Vue Router	Sparkling
当前 bundle 拥有的路由	堆内过渡（SPA）
其他 bundle 拥有的路由	`router.open(<scheme>)` —— 新容器（MPA）
`router.back()` 越过本地历史	`router.close()` —— 弹出容器
`history.state`	通过 scheme URL 在 heap 之间传递
history 模式（`createWebHistory` 等）	由 `createHybridHistory` 取代

Vue Router 完整特性集在 MPA 模型下的支持、重构与限制情况，参见兼容性矩阵。

#Vue Router（MPA）

#堆内导航（网页预览中可实时运行）

#动态路由（users bundle）

#跨页导航（MPA —— 下方可实时体验）

#映射关系

Vue Router（MPA）

堆内导航（网页预览中可实时运行）

动态路由（`users` bundle）

跨页导航（MPA —— 下方可实时体验）

映射关系