How to use ion router in vanilla js?

Hey all, I am new to ionic. And I am using ionic as a standalone framework with vanilla JS.

I have a bottom nav bar with 3 buttons and want to navigate between different html files associated to specific buttons.

I read about using ion router in vanilla JS but could not understand how to implement the same. Especially the component part.

Can some one help me?

Hey @akulchhillar0, one of the best resources for Vanilla routing with tabs (and menu, if you want) is the Stencil conference app: https://github.com/ionic-team/ionic-stencil-conference-app/blob/20a33ba2e469399420613daadff356999d0060fb/src/components/app-root/app-root.tsx#L99

Try following the example in there for the nested routes for tabs and let me know how that goes.

Thanks, but I still don’t understand how should I implement the same in vanilla js as I cannot import or export the components there. What I don’t understand is the component part in pure js.
Hope you got my point.

Also can I use pure js function to redirect user ?

One way you can do the components is by writing Web Components like this: https://github.com/ionic-team/ionic-docs/blob/77982ec95eeb73633a82abafc8003ec10abde522/src/demos/api/content/index.html#L61

Then you can pass to ion-route the name of the tag you defined, in this case page-root.

Did I understand your question?

1 Like

Okay I get creating custom elements. However I still don’t understand the use of url attribute in ion-route element. I want to redirect to /new-page.html page where new-page is the name of my custom element

Routes will be handled client side, so you won’t load new-page.html. Instead, that route will be handled by the router, then your ion-route will be called, which will then load the matching component based on the url argument. You could have those components in different files/etc. but that would mean using a bundler like webpack/etc. or using es imports.

Start with just getting the routes working correctly before you explore separating the components out into different files.

Well I have the custom component in a separate js file. However I cannot link my button to that component. 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="account"></ion-tab>
            <ion-tab tab="contact"></ion-tab>
            <ion-tab tab="settings"></ion-tab>
          
            <!-- Tab bar -->
            <ion-tab-bar slot="bottom">
              <ion-tab-button tab="account">
                <ion-icon name="person"></ion-icon>
              </ion-tab-button>
              
            </ion-tab-bar>
          </ion-tabs>

Where is your button?

I have the element <ion-tab-button tab="account">. Would this not work?

See the conference app for how to wire this up.

Notice the tabs have tab equal to the component in the route:

Try that next

Well I don’t get it. When I change my url to / I can see my component. But I can’t figure out how to link my component to a specific url. Any help?

@max Well I have made some progress with navigation but I am not sure if that is correct or not because though I am able to navigate but the browser console gives an error saying [ion-router] the path does not match any route

And in the url of my app I see the following

See that #/new-page

Rather I was expecting something like this:

And 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 href="/new-page">
                <ion-icon name="person"></ion-icon>
              </ion-tab-button>
              
            </ion-tab-bar>
          </ion-tabs>
      

As suggested I have used the same naming convention as in the example above. The only way my navigation is working because of the href attribute in ion-tab-button tag.

Please help

You need to test the routes inside of each other. Notice how these routes are nested inside of the tabs component here: