stenciljs - 嵌套模板路由/组件

Question

我一直在尝试实现嵌套路由/组件。有人可以向我解释如何嵌套路由/组件。模板路线文档没有太大帮助。说在我的组件中，左侧有一个 sidenav，stencil-route-link右侧有几个，我应该显示路由组件。

标签： stenciljsstencil-component

Answer 1

由于 Stencil 团队尚未为此发布 wiki 条目@stencil/core: 1.3.2，因此这里使用和对此主题进行了一些更新@stencil/router: 1.0.1。

诀窍是将该routeRender属性与slots 和内联子路由结合使用：

<stencil-router>
  <stencil-route-switch>
    <stencil-route url="/"
                   exact={ true }
                   component="app-home"
    />
    <stencil-route url="/me"
                   routeRender={ () => (
                     <app-me>
                       <stencil-route url="/me/login"
                                      component="app-login"
                       />
                       <stencil-route url="/me/profile"
                                      component="app-profile"
                       />
                     </app-me>
                   ) }
    />
  </stencil-route-switch>
</stencil-router>;

如果您在组件内定义子路由（在此示例中app-me），则在重新加载或直接导航到该路由后可能无法恢复该路由。因此，您必须在 global 中定义它们stencil-route-switch。