[Angular2 Router] Redirects and Path Matching - Avoid Common Routing Pitfall

In this tutorial we are going to learn how we can can configure redirects in the angular 2 router configuration. We are also going to see again another example on how the order of the configuration might trip us. We are going to see the different between path matching in prefix mode vs full mode, and we are going to learn why redirects should be in general configured using full path matching.

{path: ‘legacy-url‘, redirectTo: ‘/home‘, pathMatch: ‘full‘},

pathMatch: ‘full‘ : only match ‘legacy-url‘, won‘t match ‘legacy-url/1‘;

{path: ‘legacy-url‘, redirectTo: ‘/home‘, pathMatch: ‘prefix‘},

pathMatch: ‘prefix‘ : not only match ‘legacy-url‘, but also match ‘legacy-url/1‘;

Notice, this redirectTo should be define on the top of other routers.

时间： 2024-12-18 22:12:18

[Angular2 Router] Redirects and Path Matching - Avoid Common Routing Pitfall的相关文章

[Angular2 Router] Configure Auxiliary Routes in the Angular 2 Router - What is the Difference Towards a Primary Route?

[Angular2 Router] Lazy Load Angular 2 Modules with the Router

Angular 2 lazy loading is a core feature of Angular 2. Lazy loading allows your application to start up faster because it only needs to use the main App Module when the page initially loads. As you navigate between routes, it will load the additional

Angular2 Router

1 import Router import {RouteConfig, RouterOutlet, RouterLink, routerInjectables} from 'angular2/router'; 2 setting your RouteConfig @RouteConfig([ {path: '/', component: List, as: 'list'}, {path: '/about', component: Add, as: 'add'}, {path: '/help',

[Angular2 Router] Resolving route data in Angular 2

From Article: RESOLVING ROUTE DATA IN ANGULAR 2 Github If you know Anuglar UI router, you must know resolve function in ui router, which you can load data before template and controller get inited. In Angular2 router, you can also use resovler. The r

[Angular2 Router] Auxiliary Routes bit by bit

Article Github Auxiliary Routes is is little bit hard to understand. Here is demo, link You can see each category has an own 'View detials' button, and there is a side menu on the right side. What we want is when we click the "View details" butt

[Angular2 Router] CanActivate Route Guard - An Example of An Asynchronous Route Guard

In this tutorial we are going to learn how we can to configure an can activate route guard in the Angular 2 router. We are going to implement the concrete example where a user can only enter a certain route if its authorized to do so. We are also goi

[Angular2 Router] CanDeactivate Route Guard - How To Confirm If The User Wants To Exit A Route

In this tutorial we are going to learn how we can to configure an exit guard in the Angular 2 Router. We are going to learn how to use a CanDeactivate route guard to ask the user if he really wants to exist the screen, giving the user to for example

[Angular2 Router] Configuring a Home Route and Fallback Route - Learn An Essential Routing Concept

In this tutorial we are going to learn how to configure the Angular 2 router to cover some commonly used routing scenarios: what if the user goes to the root of the application manually ? Probably you would want some sort of home page to be displayed

[Angular2 Router] Preload lzay loading modules

From router v3.1.0, we have preloading system with router. PreloadAllModules After the init module loaded, router will preloading the rest module at the background. const indexRoute = {path: '', redirectTo: 'home', pathMatch: 'full'}; const fallbackR