Question

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

Answer 1

由于模板团队仍在not released a wiki entry上进行操作，因此使用@stencil/core: 1.3.2和@stencil/router: 1.0.1对本主题进行了一些更新。

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

<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），则在重新加载后或直接导航到该路由可能无法恢复。因此，您必须在全局stencil-route-switch中定义它们。

Answer 2

我知道这是个老问题，但我花了一些时间才弄明白，所以我想在这里分享，以防有人遇到类似问题。

<stencil-router>
  <stencil-route-switch scrollTopOffset={0}>
    <stencil-route url="/" component="app-home" exact={true} />
    <stencil-route url="/profile/:name" component="app-profile" />

    <stencil-route>
      <stencil-route-switch scrollTopOffset={0}>
        <stencil-route url="/" component="app-home" exact={true} />
        <stencil-route url="/profile/:name" component="app-profile" />

        <stencil-route url="/docs" routeRender={()=>
          <div>
          <div>Document Heading</div>

          <stencil-route-link url="/docs/setup">Setup</stencil-route-link>
          <stencil-route-link url="/docs/todo">TODO</stencil-route-link>
          <stencil-route-link url="/docs/profile">Profile</stencil-route-link>

          <stencil-route url="/docs/setup" routeRender={()=>
            <div>Set up document</div>}>
          </stencil-route>
          <stencil-route url="/docs/todo" routeRender={()=>
            <div>TODO document</div>}>
          </stencil-route>
          <stencil-route url="/docs/profile" component="app-home" />
          </div>
        }>
    </stencil-route>
  </stencil-route-switch>
</stencil-router>

一些简单的解释：

正如 titsjmen 所分享的那样，您的应用中似乎只有一个组件很重要
您可以嵌套 "stencil-route" 并且希望通过上面的代码示例您可以看到它是如何工作的。我使用 routeRender 和组件方法对其进行了测试（两者都有效！）

希望这对某人有用:)

编辑（附加说明）： 如果这不清楚，这个代码块代表你想要根据 URL 交换组件的区域 - 回到最初的问题，为了实现你想要的，侧面导航可能只是一堆“模板路由器”的问题-link”（不必放置在同一个组件中 - 我有一个名为“sidenav-item”的单独组件，似乎运行良好）

Answer 3

StencilJS docs状态：

您的项目中应该只有一个模板路由器组件。该组件控制与浏览器历史记录的所有交互，并通过事件系统汇总更新。

因此将会有一个地方来定义您的路线。他们的网页上还有一个示例：

<stencil-router>
  <stencil-route url="/" component="landing-page" exact={true}/>
  <stencil-route url="/demos" component="demos-page"/>
  <stencil-route url="/demos/rendering" component="fiber-demo"/>
</stencil-router>

输入/demos/rendering将同时呈现demos-page和fibre-demo组件。它们不会嵌套。

文档还提到了routeRender属性，该属性可用于进行某种嵌套。例如：

<stencil-route url="/" exact={true} routeRender={(props) => (
  <app-root history={props.history}>
    <app-sidebar />
    <app-content />
  </app-root> 
) />

嵌套模具路径/组件

3 个答案: