Search code examples
javascriptangularbrowser-historyhtml5-history

Skip jump link in browser's history using Angular 2


I use Angular 2 (v2.4.4) and by using routerLink I navigate between the components.

This works fine, but if I load the very save component with the very same snapshot parameter (active.snapshot.params) the page won't get loaded again. So, for example if I am on /page/56 and I click on a link here which points to /page/56, the very same link (from a menu or something), the component won't reload. (And things might change in the database since the last load, so the page needs to be reloaded.)

I bypassed it by pointing to /jump/page/56 and the Page 404 controller redirects to /page/56.

This also works fine, but if I navigate back in the browser from /page/56, it will get to /jump/page/56 which directs to /page/56 by the Page 404 controller. So basically I cannot navigate back.

As much as I know, I cannot delete browser history by the HTML5 history API, but how could I go back to the page, which was right before /page/56, just by simply clicking on the back button of the browser?

The solution might be a simple JavaScript trick independent from Angular 2, as it does not actually load a new page just loads a different component and changes the URL. (Also because of this I should not use location.reload() because it will reload Angular 2 and all the depending JS, etc.)

Thank you for your solutions in advance!


Solution

  • you can use skipLocationChange Like :

    this.router.navigate(['/jump/page/12'],{skipLocationChange:true});