如何在香草 Ionic 4 中使用离子路由器答案

【问题标题】：How to use ion-router in vanilla Ionic 4如何在香草 Ionic 4 中使用离子路由器
【发布时间】：2020-02-17 19:52:51
【问题描述】：

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

在 ion-route 元素的 JS 文档中，它说 components 属性是：

当路由匹配时，在导航出口（ion-tabs，ion-nav）中加载/选择的组件的名称。

此属性的值并不总是要加载的组件的标记名，在 ion-tabs 中它实际上是指要选择的 ion-tab 的名称。

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

<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”是在哪里定义的——它是一个名为 page-support.html 的文件还是文件中的一个元素？

所以我的主要问题是，我如何“命名”一个页面，以便我可以在需要时使用 ion-router-link 元素来显示它？如何在我的应用中拥有多个页面，以及如何使用 ion-router 在它们之间进行链接？

谢谢。

【问题讨论】：

标签： javascript ionic-framework

【解决方案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/

【讨论】：