Ionic Routig using Vanilla JS

Question

I am new to ionic framework and currently stuck on a project where I am required to implement a simple navigation. I am using ionic for the project with vanilla js.

Here is my HTML code:

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

   
    <ion-tabs>
        <!-- Tab views -->
        <ion-tab tab="new-page">
            <ion-nav></ion-nav>
        </ion-tab>

      
        <!-- Tab bar -->
        <ion-tab-bar slot="bottom">
          <ion-tab-button tab="new-page" selected=true>
            <ion-icon name="person"></ion-icon>
          </ion-tab-button>
          
        </ion-tab-bar>
      </ion-tabs>

I have a custom html component in a js file which is being rendered here. However I cannot connect my tab button with that new component.

I can't wrap my head around this. How should I go about navigating between two screens?

Answer 1

1. Ionic has in-build functionality for routing, it Is suggested to follow for the integrity of the project. Example with Ionic Angular:https://ionicframework.com/docs/angular/navigation

2. If you are looking to implement custom routing and functions using Vanilla JS,Core Cordova library is recommended - https://cordova.apache.org/ can be integrated with UI library like Boostrap easily.