javascript - 如何在 Vanilla Ionic 4 中使用 ionic 路由器

Question

我正在制作一个没有框架的 Ionic 4 PWA(所以请不要使用 Angular 答案)，我需要弄清楚如何使用 ion-router 和 ion-route 组件。我想我了解 url 路由应该如何工作，尽管我很难看到如何设置它以在单击按钮时显示正确的页面。我认为问题在于我不知道您如何引用要显示的“组件”。
在 ion-route 元素的 JS 文档中，它说 components 属性是:

Name of the component to load/select in the navigation outlet (ion-tabs, ion-nav) when the route matches.

The value of this property is not always the tagname of the component to load, in ion-tabs it actually refers to the name of the ion-tab to select.

这是文档页面上的示例代码:

<ion-router>
  <ion-route component="page-tabs">
    <ion-route url="/schedule" component="tab-schedule">
      <ion-route component="page-schedule"></ion-route>
      <ion-route url="/session/:sessionId" component="page-session"></ion-route>
    </ion-route>

    <ion-route url="/speakers" component="tab-speaker">
    <ion-route component="page-speaker-list"></ion-route>
    <ion-route url="/session/:sessionId" component="page-session"></ion-route>
    <ion-route url="/:speakerId" component="page-speaker-detail"></ion-route>
    </ion-route>

    <ion-route url="/map" component="page-map"></ion-route>
    <ion-route url="/about" component="page-about"></ion-route>
  </ion-route>

  <ion-route url="/tutorial" component="page-tutorial"></ion-route>
  <ion-route url="/login" component="page-login"></ion-route>
  <ion-route url="/account" component="page-account"></ion-route>
  <ion-route url="/signup" component="page-signup"></ion-route>
  <ion-route url="/support" component="page-support"></ion-route>
</ion-router>

例如，我不明白组件“页面支持”的定义位置 - 它是一个名为 page-support.html 的文件还是文件中的一个元素？
所以我的主要问题是，我如何“命名”一个页面，以便我可以在需要时使用 ion-router-link 元素来显示它？我的应用程序中如何有多个页面以及如何使用 ion-router 在它们之间进行链接？
谢谢。

Answer 1

好的，所以我做了一些研究，发现要定义一个组件，您需要先定义一个自定义元素，如下所示:

customElements.define('new-page', class extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <ion-header>
        <ion-toolbar>
          <ion-title>Page Header</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content class="ion-padding">
        Page Content
      </ion-content>`;
  }
});

然后，要将此页面与路由器一起使用，您将执行以下操作:

<ion-route url="/newpage" component="new-page"></ion-route>

最后，我发现 ion-nav 系统对我来说效果更好，你可以在这里阅读一个很好的教程:
https://www.techiediaries.com/ionic-4-tutorial/