First, the use of router.navigate

navigate is a method of the router class,Mainly used to jump routes.

Function definition:

navigate (commands:any [], extras? ;:navigationextras):promise`<boolean>`
interface navigationextras {

1.this.router.navigate (["user", 1]);

Jump from the root route

2.this.router.navigate (["user", 1], {relativeto:route});

The default is the root route,Relative to the current route after setting,route is an instance of activatedroute, you need to import activatedroute

3.this.router.navigate (["user", 1], {queryparams:{id:1}}); Parameter/user/1?id=1

4.this.router.navigate (["view", 1], {preservequeryparams:true});

The default value is false, set to true, retain the query parameter/user?id=1 to/view&id63 in the previous route

5.this.router.navigate (["user", 1], {fragment:"top"});

Anchor jump in route/user/1 #top

6.this.router.navigate (["/view"], {preservefragment:true});

The default value is false, set to true, retain the anchor point in the previous route/user/1 #top to/view #top

7.this.router.navigate (["/user", 1], {skiplocationchange:true});

The default value is false. When set to true, the URL in the browser will remain unchanged when the route is redirected.But the parameters passed in are still valid

8.this.router.navigate (["/user", 1], {replaceurl:true});

The default is true when not set, the route will not jump if set to false

Router.navigate refresh page problem

The cause of this problem is generally because we forgot to add the type attribute when using the

  • Previous Tutorial of using ng-if, ng-show/ng-hide and ng-switch in AngularJS
  • Next Ioc (inversion of control) and Di (dependency injection) in php