How to use ion-router in vanilla Ionic 4

Question

I'm making an Ionic 4 PWA without a framework (so no Angular answers please) and I need to work out how to use the ion-router and ion-route components. I think I understand how the url routing should work, though I'm struggling to see how to set it up to show the correct page when a button is clicked. I think the issue is that I don't get exactly how you reference a 'component' to show.

In the JS docs for the ion-route element, it says that the components property is:

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.

This is the example code on the docs page:

<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>

What I don't understand is where the component "page-support", for example, is defined - is it a file called page-support.html or is it an element within a file?

So my main question is, how do I 'name' a page so that I can use the ion-router-link element to show it when needed? How do I have multiple pages in my app and how do I use ion-router to link between them?

Thanks.

Answer 1

Ok, so I’ve done some research and I’ve found that to define a component, you need to define a custom element first, like this:

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>`;
  }
});

Then, to use this page with the router, you would do something like this:

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

In the end, I found that the ion-nav system works better for me and you can read a good tutorial here: https://www.techiediaries.com/ionic-4-tutorial/