Jump navigation of Router class in Angular4

This article mainly introduces the detailed explanation of the jump navigation of the Router class in Angular4. It has certain reference value. Interested friends can refer to it.

I have been learning angular4 recently. It is indeed better than There have been great changes and improvements in the past, but many places are not so easy to understand. Fortunately, the official documents and examples are in Chinese, which is still very helpful for those who are not good at English.

In the process of learning, the routing (router) mechanism is inseparable and is used in many places.

First route configuration Route:

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

Secondly route jump Router.navigate

 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 to /login with the root route

this.router.navigate(['login']);

2.Settings relativeTo jumps relative to the current route. route is an instance of ActivatedRoute. To use it, you need to import ActivatedRoute

this.router.navigate(['login', 1],{relativeTo: route});

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

#

this.router.navigate(['login', 1],{ queryParams: { name: 1 } });

4.preserveQueryParams default value is false, set to true, retain the query parameters /login?name=1 to /home?name=1# in the previous route

##

this.router.navigate(['home'], { preserveQueryParams: true });

5. Anchor jump in routing /home#top

 this.router.navigate(['home'],{ fragment: 'top' });

6 .preserveFragment defaults to false, set to true, and retains the anchor point /home#top to /role#top

this.router.navigate(['/role'], { preserveFragment: true });

7.skipLocationChange defaults to false, set to true, the url in the browser will remain unchanged when the route jumps, but the parameters passed in are still valid

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

8.replaceUrl default is true, set to false, the route will not jump

this.router.navigate(['/home'], { replaceUrl: true });

The above is the detailed content of Jump navigation of Router class in Angular4. For more information, please follow other related articles on the PHP Chinese website!