0

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

4

3 回答 3

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。

于 2019-09-02T21:59:52.773 回答
1

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

<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 所分享的，看起来在您的应用程序中只有一个组件很重要
  • 但是，您可以嵌套“模板路由”，并希望通过上面的代码示例，您可以看到它是如何工作的。我使用 routeRender 和组件方法对其进行了测试（两者都有效！）

希望这对某人有用:)

编辑（附加说明）： 如果不清楚，此代码块表示您想要根据 URL 交换组件的区域 - 回到原始问题，为了实现您想要的，侧导航可能只是一个问题一堆“模板路由器链接”（不必放在同一个组件中 - 我有一个名为“sidenav-item”的单独组件，似乎工作得很好）

于 2021-05-27T16:55:29.880 回答
1

StencilJS 文档状态：

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

所以会有一个地方来定义你的路线。他们的网页上还有一个例子：

<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 和 Fiber-demo 组件。但是它们不会嵌套。

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

<stencil-route url="/" exact={true} routeRender={(props) => (
  <app-root history={props.history}>
    <app-sidebar />
    <app-content />
  </app-root> 
) />
于 2018-10-08T14:05:43.743 回答