Detailed explanation of the jump navigation of the Router class in Angular4

I have been learning angular4 recently. It has indeed undergone great changes and improvements compared to before. Many places are not so easy to understand. Fortunately, the official documents and examples are Chinese, which is not very good for English and is of great help to learn.

Official address:/docs/ts/latest/api/router/index/

The router mechanism is inseparable in the learning process and needs to be used in many places.

First route configuration Route:

import { NgModule }       from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
 
import { HomeComponent }  from './';
import { LoginComponent }   from './';
import { RegisterComponent } from './';
 
 const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'login', component: LoginComponent },
  { path: 'heroes',   component: RegisterComponent }
 ];
 
 @NgModule({
  imports: [ (routes) ],
  exports: [ RouterModule ]
 })
 export class AppRoutingModule {}

Secondly, route jump

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

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

1. Jump/login with root route

(['login']);

2. Set relativeTo to jump relative to the current route. route is an instance of ActivatedRoute. You need to import ActivatedRoute.

(['login', 1],{relativeTo: route}); 

3. Pass parameters in the route /login?name=1

(['login', 1],{ queryParams: { name: 1 } }); 

The default value is false, set to true, retaining the query parameters in the previous route /login?name=1 to /home?name=1

(['home'], { preserveQueryParams: true }); 

5. Anchor point jump in route /home#top

 (['home'],{ fragment: 'top' });

Default is false, set to true, retaining the anchor point in the previous route /home#top to /role#top

(['/role'], { preserveFragment: true }); 

Default is false, set to true, the URL in the browser will remain unchanged when the route is redirected, but the passed parameters are still valid.

(['/home'], { skipLocationChange: true });

Default is true, set to false, the route will not be redirected

(['/home'], { replaceUrl: true }); 

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.