Как использовать ion-router в ванили Ionic 4

Question

Я делаю Ionic 4 PWA без фреймворка (поэтому не нужно никаких ответов на Angular), и мне нужно разобраться, как использовать компоненты ion-router и ion-route. Я думаю, что понимаю, как должна работать маршрутизация URL, хотя я изо всех сил пытаюсь понять, как настроить ее, чтобы она отображала правильную страницу при нажатии кнопки. Я думаю, проблема в том, что я не понимаю, как именно вы ссылаетесь на «компонент», чтобы показать.

В документах JS для элемента ion-route указано, что свойство компонентов имеет вид:

Имя компонента, который нужно загрузить / выбрать в навигационной точке (ion-tabs, ion-nav), когда маршрут совпадает.

Значение этого свойства не всегда является тэгом компонента, который нужно загрузить, в ion-tabs оно фактически ссылается на имя ионной вкладки для выбора.

Thisпример кода на странице документации:

<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 для связи между ними?

Спасибо.

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/