Detailed explanation of examples of routing Router class in Angular4
I have been learning angular4 recently. It has indeed undergone great changes and improvements than before. Many places are not so easy to understand. Fortunately, the official documents and examples are in Chinese. If you are not good at English, there are still some Very helpful to study.
Official address:
During the learning process, the routing (router) mechanism is inseparable and is used in many places.
First route configuration Route:


1 import { NgModule } from '@angular/core'; 2 import { RouterModule, Routes } from '@angular/router'; 3 4 import { HomeComponent } from './home.component'; 5 import { LoginComponent } from './login.component'; 6 import { RegisterComponent } from './register.component'; 7 8 const routes: Routes = [ 9 { path: '', redirectTo: '/home', pathMatch: 'full' },10 { path: 'home', component: HomeComponent },11 { path: 'login', component: LoginComponent },12 { path: 'heroes', component: RegisterComponent }13 ];14 15 @NgModule({16 imports: [ RouterModule.forRoot(routes) ],17 exports: [ RouterModule ]18 })19 export class AppRoutingModule {}
Secondly route jump Router. navigate
1 navigate(commands: any[], extras?: NavigationExtras) : Promise<boolean>


1 interface NavigationExtras { 2 relativeTo : ActivatedRoute 3 queryParams : Params 4 fragment : string 5 preserveQueryParams : boolean 6 queryParamsHandling : QueryParamsHandling 7 preserveFragment : boolean 8 skipLocationChange : boolean 9 replaceUrl : boolean10 }
this.router.navigate(['login', 1],{relativeTo: route});
# 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
5. The anchor point jumps to /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 in the previous route
this.router.navigate(['/role' ], { preserveFragment: true }); 7.skipLocationChange defaults to false. If 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 defaults to true, if set to false, the route will not jump
this.router.navigate(['/home'], { replaceUrl: true });
There are still many things to learn , I will write about the jump here first. I hope everyone can learn and share the pitfalls they have overcome.
The above is the detailed content of Detailed explanation of examples of routing Router class in Angular4. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

ReactRouter User Guide: How to Implement Front-End Routing Control With the popularity of single-page applications, front-end routing has become an important part that cannot be ignored. As the most popular routing library in the React ecosystem, ReactRouter provides rich functions and easy-to-use APIs, making the implementation of front-end routing very simple and flexible. This article will introduce how to use ReactRouter and provide some specific code examples. To install ReactRouter first, we need

How to implement API routing in the Slim framework Slim is a lightweight PHP micro-framework that provides a simple and flexible way to build web applications. One of the main features is the implementation of API routing, allowing us to map different requests to corresponding handlers. This article will introduce how to implement API routing in the Slim framework and provide some code examples. First, we need to install the Slim framework. The latest version of Slim can be installed through Composer. Open a terminal and

Apache Camel is an Enterprise Service Bus (ESB)-based integration framework that can easily integrate disparate applications, services, and data sources to automate complex business processes. ApacheCamel uses route-based configuration to easily define and manage integration processes. Key features of ApacheCamel include: Flexibility: ApacheCamel can be easily integrated with a variety of applications, services, and data sources. It supports multiple protocols, including HTTP, JMS, SOAP, FTP, etc. Efficiency: ApacheCamel is very efficient, it can handle a large number of messages. It uses an asynchronous messaging mechanism, which improves performance. Expandable

ThinkPHP6 is a powerful PHP framework with convenient routing functions that can easily implement URL routing configuration; at the same time, ThinkPHP6 also supports a variety of routing modes, such as GET, POST, PUT, DELETE, etc. This article will introduce how to use ThinkPHP6 for routing configuration. 1. ThinkPHP6 routing mode GET method: The GET method is a method used to obtain data and is often used for page display. In ThinkPHP6, you can use the following

How to use routing to customize page switching animation effects in a Vue project? Introduction: In the Vue project, routing is one of the functions we often use. Switching between pages can be achieved through routing, providing a good user experience. In order to make page switching more vivid, we can achieve it by customizing animation effects. This article will introduce how to use routing to customize the page switching animation effect in the Vue project. Create a Vue project First, we need to create a Vue project. You can use VueCLI to quickly build

Implementation method and experience summary of flexible configuration of routing rules in PHP Introduction: In Web development, routing rules are a very important part, which determines the corresponding relationship between URL and specific PHP scripts. In the traditional development method, we usually configure various URL rules in the routing file, and then map the URL to the corresponding script path. However, as the complexity of the project increases and business requirements change, it will become very cumbersome and inflexible if each URL needs to be configured manually. So, how to implement in PHP

In modern web applications, implementing web page navigation and routing is a very important part. Using JavaScript functions to implement this function can make our web applications more flexible, scalable and user-friendly. This article will introduce how to use JavaScript functions to implement web page navigation and routing, and provide specific code examples. Implementing web page navigation For a web application, web page navigation is the most frequently operated part by users. When a user clicks on the page

How to use routing to implement page jump in Vue? With the continuous development of front-end development technology, Vue.js has become one of the most popular front-end frameworks. In Vue development, page jump is an essential part. Vue provides VueRouter to manage application routing, and seamless switching between pages can be achieved through routing. This article will introduce how to use routing to implement page jumps in Vue, with code examples. First, install the vue-router plugin in the Vue project.
