Now, to complete the final step and implement those routes in our app-routing.module.ts file, they would look like this:
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: "https://stackoverflow.com/questions/51828017/home", loadChildren: './pages/home/home.module#HomeModule' },
{ path: 'products', loadChildren: './pages/products/products.module#ProductsModule'},
{ path: 'products/:id', loadChildren: './pages/product-detail/product-detail.module#ProductDetailModule' },
{ path: 'products/categories', loadChildren: './pages/product-categories/product-categories.
{ path: 'support', loadChildren: './pages/support/support.module#SupportModule' }
];
setRoot in html page
<ion-button href="https://stackoverflow.com/support" routerDirection="root">
or in class
this.navCtrl.navigateRoot("https://stackoverflow.com/support");
Push
<ion-button href="https://stackoverflow.com/products/12" routerDirection="forward">
or
this.navCtrl.navigateForward("https://stackoverflow.com/products/12");
Pop
<ion-button href="https://stackoverflow.com/products" routerDirection="backward">
or
<ion-back-button defaultHref="https://stackoverflow.com/products"></ion-back-button>
you can also navigate backwards programatically:
this.navCtrl.navigateBack("https://stackoverflow.com/products");
p/s: https://www.joshmorony.com/converting-ionic-3-push-pop-navigation-to-angular-routing-in-ionic-4/