ion-route
The route component takes a component and renders it when the Browser URL matches the url property.
note
Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use ion-router-outlet and the Angular router.
Navigation Hooks
Navigation hooks can be used to perform tasks or act as navigation guards. Hooks are used by providing functions to the beforeEnter and beforeLeave properties on each ion-route. Returning true allows navigation to proceed, while returning false causes it to be cancelled. Returning an object of type NavigationHookOptions allows you to redirect navigation to another page.
Interfaces
interfaceNavigationHookOptions{
/**
* A valid path to redirect navigation to.
*/
redirect:string;
}
Usage
- Javascript
- Stencil
- Vue
<ion-router>
<ion-routeurl="/home"component="page-home"></ion-route>
<ion-routeurl="/dashboard"component="page-dashboard"></ion-route>
<ion-routeurl="/new-message"component="page-new-message"></ion-route>
<ion-routeurl="/login"component="page-login"></ion-route>
</ion-router>
const dashboardPage =document.querySelector('ion-route[url="/dashboard"]');
dashboardPage.beforeEnter= isLoggedInGuard;
const newMessagePage =document.querySelector('ion-route[url="/dashboard"]');
newMessagePage.beforeLeave= hasUnsavedDataGuard;
constisLoggedInGuard=async()=>{
const isLoggedIn =awaitUserData.isLoggedIn();// Replace this with actual login validation
if(isLoggedIn){
returntrue;
}else{
return{redirect:'/login'};// If a user is not logged in, they will be redirected to the /login page
}
}
consthasUnsavedDataGuard=async()=>{
const hasUnsavedData =awaitcheckData();// Replace this with actual validation
if(hasUnsavedData){
returnawaitconfirmDiscardChanges();
}else{
returntrue;
}
}
constconfirmDiscardChanges=async()=>{
const alert =document.createElement('ion-alert');
alert.header='Discard Unsaved Changes?';
alert.message='Are you sure you want to leave? Any unsaved changed will be lost.';
alert.buttons=[
{
text:'Cancel',
role:'Cancel',
},
{
text:'Discard',
role:'destructive',
}
];
document.body.appendChild(alert);
await alert.present();
const{ role }=await alert.onDidDismiss();
return(role ==='Cancel')?false:true;
}
import{ Component, h }from'@stencil/core';
import{ alertController }from'@ionic/core';
@Component({
tag:'router-example',
styleUrl:'router-example.css'
})
exportclassRouterExample{
render(){
return(
<ion-router>
<ion-route url="/home" component="page-home"></ion-route>
<ion-route url="/dashboard" component="page-dashboard" beforeEnter={isLoggedInGuard}></ion-route>
<ion-route url="/new-message" component="page-new-message" beforeLeave={hasUnsavedDataGuard}></ion-route>
<ion-route url="/login" component="page-login"></ion-route>
</ion-router>
)
}
}
constisLoggedInGuard=async()=>{
const isLoggedIn =await UserData.isLoggedIn();// Replace this with actual login validation
if(isLoggedIn){
returntrue;
}else{
return{ redirect:'/login'};// If a user is not logged in, they will be redirected to the /login page
}
}
consthasUnsavedDataGuard=async()=>{
const hasUnsavedData =awaitcheckData();// Replace this with actual validation
if(hasUnsavedData){
returnawaitconfirmDiscardChanges();
}else{
returntrue;
}
}
constconfirmDiscardChanges=async()=>{
const alert =await alertController.create({
header:'Discard Unsaved Changes?',
message:'Are you sure you want to leave? Any unsaved changed will be lost.',
buttons:[
{
text:'Cancel',
role:'Cancel',
},
{
text:'Discard',
role:'destructive',
}
]
});
await alert.present();
const{ role }=await alert.onDidDismiss();
return(role ==='Cancel')?false:true;
}
<template>
<ion-router>
<ion-routeurl="/home"component="page-home"></ion-route>
<ion-routeurl="/dashboard"component="page-dashboard":beforeEnter="isLoggedInGuard"></ion-route>
<ion-routeurl="/new-message"component="page-new-message":beforeLeave="hasUnsavedDataGuard"></ion-route>
<ion-routeurl="/login"component="page-login"></ion-route>
</ion-router>
</template>
<script>
import{ alertController }from'@ionic/vue';
constisLoggedInGuard=async()=>{
const isLoggedIn =awaitUserData.isLoggedIn();// Replace this with actual login validation
if(isLoggedIn){
returntrue;
}else{
return{redirect:'/login'};// If a user is not logged in, they will be redirected to the /login page
}
}
consthasUnsavedDataGuard=async()=>{
const hasUnsavedData =awaitcheckData();// Replace this with actual validation
if(hasUnsavedData){
returnawaitconfirmDiscardChanges();
}else{
returntrue;
}
}
constconfirmDiscardChanges=async()=>{
const alert =await alertController.create({
header:'Discard Unsaved Changes?',
message:'Are you sure you want to leave? Any unsaved changed will be lost.',
buttons:[
{
text:'Cancel',
role:'Cancel',
},
{
text:'Discard',
role:'destructive',
}
]
});
await alert.present();
const{ role }=await alert.onDidDismiss();
return(role ==='Cancel')?false:true;
}
</script>
Properties
beforeEnter
Description A navigation hook that is fired when the route tries to enter. Returning
true allows the navigation to proceed, while returning false causes it to be cancelled. Returning a NavigationHookOptions object causes the router to redirect to the path specified. Attribute
undefined Type
(() => NavigationHookResult | Promise<NavigationHookResult>) | undefined Default
undefinedbeforeLeave
Description A navigation hook that is fired when the route tries to leave. Returning
true allows the navigation to proceed, while returning false causes it to be cancelled. Returning a NavigationHookOptions object causes the router to redirect to the path specified. Attribute
undefined Type
(() => NavigationHookResult | Promise<NavigationHookResult>) | undefined Default
undefinedcomponent
Description Name of the component to load/select in the navigation outlet (
The value of this property is not always the tagname of the component to load, in
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. Attribute
component Type
string Default
undefinedcomponentProps
Description A key value
{ 'red': true, 'blue': 'white'} containing props that should be passed to the defined component when rendered. Attribute
undefined Type
undefined | { [key: string]: any; } Default
undefinedurl
Description Relative path that needs to match in order for this route to apply.
Accepts paths similar to expressjs so that you can define parameters in the url /foo/:bar where bar would be available in incoming props.
Accepts paths similar to expressjs so that you can define parameters in the url /foo/:bar where bar would be available in incoming props.
Attribute
url Type
string Default
''Events
| Name | Description | Bubbles |
|---|---|---|
ionRouteDataChanged | Used internally by ion-router to know when this route did change. | true |
Methods
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSS Custom Properties
No CSS custom properties available for this component.
Slots
No slots available for this component.