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