Angular2路由器(@angle/router) ，如何设置默认路由？

You set path of route is ''. Example for DashboardComponent is load first.

@Routes([
{ path: '', component: DashboardComponent },
{ path: '/ConfigManager', component: ConfigManagerComponent },
{ path: '/Merge', component: MergeComponent },
{ path: '/ApplicationManagement', component: ApplicationMgmtComponent }
])

Hope it help you.

V2.0.0 and later

See also see https://angular.io/guide/router#the-default-route-to-heroes

RouterConfig = [
{ path: '', redirectTo: '/heroes', pathMatch: 'full' },
{ path: 'heroes', component: HeroComponent,
children: [
{ path: '', redirectTo: '/detail', pathMatch: 'full' },
{ path: 'detail', component: HeroDetailComponent }
]
}
];

There is also the catch-all route

{ path: '**', redirectTo: '/heroes', pathMatch: 'full' },

which redirects "invalid" urls.

V3-alpha (vladivostok)

Use path / and redirectTo

RouterConfig = [
{ path: '/', redirectTo: 'heroes', terminal: true },
{ path: 'heroes', component: HeroComponent,
children: [
{ path: '/', redirectTo: 'detail', terminal: true },
{ path: 'detail', component: HeroDetailComponent }
]
}
];

RC.1 @angular/router

The RC router doesn't yet support useAsDefault. As a workaround you can navigate explicitely.

In the root component

export class AppComponent {
constructor(router:Router) {
router.navigate(['/Merge']);
}
}

for other components

export class OtherComponent {
constructor(private router:Router) {}


routerOnActivate(curr: RouteSegment, prev?: RouteSegment, currTree?: RouteTree, prevTree?: RouteTree) : void {
this.router.navigate(['SomeRoute'], curr);
}
}

With the current version of angular 2 you can't use '/' on a path or give a name to your route. What you can do is create a route file like "app.routes.ts" and import your components, make sure of the path when importing.

import { Component } from '@angular/core';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ConfigManagerComponent } from './configManager/configManager.component';
import { ApplicationMgmtComponent } from './applicationMgmt/applicationMgmt.component';
import { MergeComponent } from './merge/merge.component';`

Add:

import {RouterConfig, provideRouter } from '@angular/router';

Then your routes:

const routes:RouterConfig = [
{ path: 'Dashboard', component: DashboardComponent },
{ path: 'ConfigManager', component: ConfigManagerComponent },
{ path: 'Merge', component: MergeComponent },
{ path: 'ApplicationManagement', component: ApplicationMgmtComponent }
];

Then export:

export  const APP_ROUTER_PROVIDERS = [
provideRouter(routes)]

In your main.ts import APP_ROUTER_PROVIDERS and add bootstrap the router providers to the main.ts like this:

bootstrap(AppComponent,[APP_ROUTER_PROVIDERS]);

Finally, your link will look like this:

li class="nav hidden-xs"><a [routerLink]="['./Dashboard']" routerLinkActive="active">Dashboard</a>/li>

Only you need to add other parameter in your route, the parameter is useAsDefault:true. For example, if you want the DashboardComponent as default you need to do this:

@RouteConfig([
{ path: '/Dashboard', component: DashboardComponent , useAsDefault:true},
.
.
.
])

I recomend you to add names to your routes.

{ path: '/Dashboard',name:'Dashboard', component: DashboardComponent , useAsDefault:true}

The path should be left blank to make it default component.

{ path: '', component: DashboardComponent },

In Angular 2+, you can set route to default page by adding this route to your route module. In this case login is my target route for the default page.

{path:'',redirectTo:'login', pathMatch: 'full' },

I faced same issue apply all possible solution but finally this solve my problem

export class AppRoutingModule {
constructor(private router: Router) {
this.router.errorHandler = (error: any) => {
this.router.navigate(['404']); // or redirect to default route
}
}
}

Hope this will help you.

Suppose you want to load RegistrationComponent on load and then ConfirmationComponent on some event click on RegistrationComponent.

So in appModule.ts, you can write like this.

RouterModule.forRoot([
{
path: '',
redirectTo: 'registration',
pathMatch: 'full'
},
{
path: 'registration',
component: RegistrationComponent
},
{
path : 'confirmation',
component: ConfirmationComponent
}
])

OR

RouterModule.forRoot([
{
path: '',
component: RegistrationComponent
},
{
path : 'confirmation',
component: ConfirmationComponent
}
])

is also fine. Choose whatever you like.

according to documentation you should just

{ path: '**', component: DefaultLayoutComponent }

on your app-routing.module.ts source: https://angular.io/guide/router

I just faced the same issue, I managed to make it work on my machine, however the change I did is not the same way it is mentioned in the documentation so it could be an issue of angular version routing module, mine is Angular 7

It only worked when I changed the lazy module main route entry path with same path as configured at the app-routes.ts

routes = [{path:'', redirectTo: '\home\default', pathMatch: 'full'},
{path: '',
children: [{
path:'home',
loadChildren :'lazy module path'
}]


}];


routes configured at HomeModule
const routes = [{path: 'home', redirectTo: 'default', pathMatch: 'full'},
{path: 'default', component: MyPageComponent},
]


instead of
const routes = [{path: '', redirectTo: 'default', pathMatch: 'full'},
{path: 'default', component: MyPageComponent},
]