Angular2路由器（@ angular / router），如何设置默认路由？

如何在我的@Routes路由元数据集合中设置默认路由？如果使用@ angular / router弃用的angular2路由器，请在@routeConfig对象中定义路由，该对象是路由对象的集合，但是这些路由对象具有更多的属性。例如，它们具有“名称”和“ useAsDefualt”属性，而在@ angular / router之外定义的路由则没有。我想使用新路由器编写我的新应用程序，但是如何使用新路由器并设置默认路由？

这是我的主要应用程序组件，它定义了我的路线：

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';

import { ROUTER_DIRECTIVES, Routes } from '@angular/router';


@Component({
    selector: 'app-container',
    templateUrl: 'app/app.component.html',
    directives: [ROUTER_DIRECTIVES]
})

@Routes([

        { path: '/Dashboard', component: DashboardComponent },
        { path: '/ConfigManager', component: ConfigManagerComponent },
        { path: '/Merge', component: MergeComponent },
        { path: '/ApplicationManagement', component: ApplicationMgmtComponent }
])

export class AppComponent { }

当我单击如下所示的锚标记时，路线定义似乎运行良好：

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

它过渡到关联的路线。我唯一的问题是我的应用加载时没有激活的路由。如何定义应用程序引导时处于活动状态的默认路由？

谢谢！

V2.0.0及更高版本

另请参阅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 }
    ] 
  }
];

还有全包路线

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

重定向“无效”网址。

V3-alpha（符拉迪沃斯托克（海参div））

使用路径/和redirectTo

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

RC.1 @角/路由器

RC路由器尚不支持useAsDefault。作为解决方法，您可以显式导航。

在根组件中

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

对于其他组件

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

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

您将路线设置为“”。DashboardComponent的示例首先加载。

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

希望对您有帮助。

在Angular 2+中，您可以通过将路由添加到路由模块来将路由设置为默认页面。在这种情况下，登录是默认页面的目标路由。

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

我遇到了同样的问题，请使用所有可能的解决方案，但最终这解决了我的问题

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

希望这会帮助你。

假设您要在加载时加载RegistrationComponent，然后在某些事件上单击ConfirmationComponent，请单击RegistrationComponent。

因此，在中appModule.ts，您可以这样编写。

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

要么

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

还可以 选择任何你喜欢的。

使用当前版本的angular 2，您不能在路径上使用'/'或为您的路线命名。您可以做的是创建一个路径文件，例如“ app.routes.ts”，然后导入您的组件，并确保导入时的路径。

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';`

加：

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

然后您的路线：

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

然后导出：

export  const APP_ROUTER_PROVIDERS = [
    provideRouter(routes)]

在main.ts中APP_ROUTER_PROVIDERS，将路由器提供程序导入并添加引导程序到main.ts中，如下所示：

bootstrap(AppComponent,[APP_ROUTER_PROVIDERS]);

最后，您的链接将如下所示：

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

仅需要在路由中添加其他参数，该参数为useAsDefault：true。例如，如果要将DashboardComponent设置为默认值，则需要执行以下操作：

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

我建议您在路线中添加名称。

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

该路径应留空以使其成为默认组件。

{ path: '', component: DashboardComponent },

根据文档，您应该

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

在您的app-routing.module.ts来源上：https : //angular.io/guide/router

我只是遇到了同样的问题，我设法使其在我的机器上运行，但是我所做的更改与文档中提到的方式不同，因此可能是角度版本路由模块的问题，我的是Angular 7

仅当我使用与在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},
                ]