Sparkling
  • 中文

      • 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 （或页内按钮），可见路由在不打开新页面的情况下发生变化。

      vue-router-mpasrc/pages/main/views/Home.vue
      这一点超越了其他示例

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

      动态路由（users bundle）

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

      vue-router-mpasrc/pages/users/views/UserList.vue

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

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

      上方的 <Go> 预览一次只渲染一个 bundle、且没有原生桥，所以跨页导航跑不起来。下方这个 demo 不同:它会在新标签页打开 Sparkling web shell——为每个容器堆叠一个 <lynx-view>、 提供 spkPipe 方法桥、并安装 RouterWebHost——因此 router.open 会真的在你的浏览器里 打开一个新容器。点击 push('/users'),第二个容器会滑入并压栈(顶部 depth 变为 1), 而浏览器返回键会把它滑出——因为 shell 独占整个标签页,驱动的是真实的浏览器 history。 (这个滑动是 shell 在 push/pop 时施加的原生风格过渡,并会遵循 prefers-reduced-motion。)

      Open the live MPA demo Opens the Sparkling web shell in a new tab — real cross-page navigation in your browser (try push('/users'), then the back button).

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

      为何

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

      映射关系

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

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