app 壳

你或许会熟悉 app 壳模型，它在谷歌的 PWA 程序中得到推广。

app 壳是一个用来驱动用户界面的最小化的 HTML，CSS 和 JavaScript。

在 NX 中，路径路由负责在 app 壳中导航。一个简单的路由结构如下所示。

  1. <router-comp>
  2.     <h2 route="login"/>Login page</h2>
  3.     <h2 route="app"/>The app</h2>
  4. </router-comp>

这和之前的例子类似 - 特别是和 React 例子 - 但是这里有一个主要的区别。它没有处理 user 和 account 参数。相反，它只是在空的app shell中导航。

这让它成为一个非常简单的树遍历问题。路由树被遍历 - 基于 URL 路由 - 然后它以它的方式显示组件。

app 壳 - 图1

以上图表解释了当前视图是如何切换为 /settings/profile 地址的。你可以找到如下相应的代码。

  1. nx.components.router()
  2.   .register('router-comp')
  1. <a iref="home">Home</a>
  2. <a iref="settings">Settings</a>
  3. <router-comp>
  4.   <h2 route="home" default-route>Home page</h2>
  5.   <div route="settings">
  6.     <h2>Settings page</h2>
  7.     <a iref="./profile">Profile</a>
  8.     <a iref="./privacy">Privacy</a>
  9.     <router-comp>
  10.       <h3 route="profile" default-route>Profile settings</h3>
  11.       <h3 route="privacy">Privacy settings</h3>
  12.     </router-comp>
  13.   </div>
  14. </router-comp>

这个示例展示了拥有默认和相对路由的嵌套路由结构。如你所见，只用 HTML 配置相当的简单，并且它和大多数的文件系统运行原理类似。你可以在它里面使用绝对路径 home 和相对路径 ./privacy 链接来导航。路由片段运行效果如下图所示。

app 壳 - 图2

这个简单的结构可以被滥用来创建强大的模式。一个例子是并行路由，指的是同一时间遍历多个路由树。侧边菜单栏和 NX docs page 的内容都是这样工作的。它有两个并行的内嵌路由，同时改变侧边导航和页面的内容。