Ionic 4 Angular router navigate and clear stack/history of previous page

Question

I\'m developing an app using Ionic 4 with Angular router. I would like to navigate to another page and clear the page stack. In Android native, it\'s something like this:

Answer 1

For example of a login page, which is a root page ('/login'), after clicking the login button navigate to a new page like this:

onLogin() {
   this.router.navigateByUrl('/profile', { replaceUrl: true }) 
}

It replaces the page history entry with a new URL, in this particular case with '/profile'. After using a plain <ion-back-button></ion-back-button> or the browser's back button, you will not be redirected to the login page but to the preceding page. Let's say your page navigation is like this: home -> login -> profile, but the history will remember only home -> profile, thus hitting the back button at profile page will take you back to home.

For a complete solution, you can combine this with Angular Route Guards, to prevent accessing pages based on some conditions (e.g. user is logged in). Hints how to do it can be found in this answer.

Answer 2

this.router.navigateByUrl('/login', { skipLocationChange: true });

Navigates without pushing a new state into history.

https://angular.io/api/router/NavigationExtras