Detailed explanation of the use and refresh page issues of router routing jump navigation in angular2

This article mainly introduces the relevant content on the use of router routing navigate in angular2 and the refresh page problem. It is shared for your reference and learning. Let’s take a look at the detailed introduction below:

1. Use

navigate is a method of the Router class, mainly used to jump routes.

Function definition:

navigate(commands: any[], extras?: NavigationExtras) : Promise`<boolean>`

interface NavigationExtras {
 relativeTo : ActivatedRoute
 queryParams : Params
 fragment : string
 preserveQueryParams : boolean
 preserveFragment : boolean
 skipLocationChange : boolean
 replaceUrl : boolean
}

1.(['user', 1]);

Jump from the root route as the starting point

2.(['user', 1],{relativeTo: route});

The default value is the root route, and it will jump relative to the current route after setting. Route is an instance of ActivatedRoute. You need to import ActivatedRoute.

3.(['user', 1],{ queryParams: { id: 1 } });
Pass the parameter /user/1?id=1 in the route

4.(['view', 1], { preserveQueryParams: true });

The default value is false, set to true, retaining the query parameters /user?id=1 to /view?id=1 in the previous route

5.(['user', 1],{ fragment: 'top' });

Anchor point jump in route /user/1#top

6.(['/view'], { preserveFragment: true });

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

7.(['/user',1], { skipLocationChange: true });

The default value is false. When the route jumps to true, the URL in the browser will remain unchanged, but the passed parameters are still valid.

8.(['/user',1], { replaceUrl: true });

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

2. Refresh page problem

This problem is usually caused by the fact that we forget to add the type attribute when using <button> in the <form> form. In the form, if we forget to add attributes to the button, it will default to submit.

<button (click)="toDetail()">detail</button>

toDetail() {
 this._router.navigate(['/detail']);
}

Solution:

1. Add type

<button type="button" (click)="toDetail()">detail</button>

Add false

<button (click)="toDetail();false">detail</button>

Summarize

The above is the entire content of this article. I hope that the content of this article will be of some help to everyone’s learning or use. If you have any questions, you can leave a message to communicate. Thank you for your support.

For more information about AngularJS, readers who are interested in view the topic of this site:Summary of AngularJS command operation skills》、《AngularJS Introduction and Advanced Tutorial"and"AngularJS MVC architecture summary》