无法匹配任何路线:“ [英] Cannot match any routes: ''

问题描述

我在angular2应用程序中有一条已定义的路由，并收到这样的错误:

I have a defined route in angular2 application and receive such error:

无法匹配任何路线:"

export const routes: Routes = [{
  path: '',
  component: MainComponent,

  children: [{
    path: 'callCenter',
    component: CallCenterComponent,
    resolve: {
      countries: CountriesResolver
    },
  }, {
    path: 'vehicle',
    component: VehicleComponent,
    resolve: {
      vehicleCategories: VehicleCategoryResolver,
      vehicleOptions: VehicleOptionResolver
    },
  }, {
    path: 'territory',
    component: TerritoryComponent,
    resolve: {
      territoryOptions: TerritoryOptionResolver
    }
  },{
    path: 'token',
    component: TokenGenerationComponent
  }, {
    path: 'rider',
    component: RiderComponent
  }, {
    path: 'dispatch',
    component: DispatchSchemaComponent,
    resolve: {
      dispatchOrders: DispatchOrderResolver,
      dispatchModes: DispatchModeResolver
    }
  }]
}, {
  path: 'login',
  component: LoginComponent
}];

这是我的路线配置代码.我使它与示例中的相同，但是它不起作用，redirectTo属性也无济于事.默认的空路由不会加载.有人可以帮我吗?

This is a code of my route config. I make it the same as in examples but it does not work, redirectTo property does not help also. default empty route does not loading. Could anyone help me?

推荐答案

我相信angular期望MainComponent子路由具有路径为路径的路由.

I believe angular is expecting MainComponent child routes to have route with path ''.

 export const routes: Routes = [{
  path: '',
  component: MainComponent,

  children: [{
      path: '',
      component: SomeComponent
     },
     {
     path: 'callCenter',
     component: CallCenterComponent,
     resolve: {
      countries: CountriesResolver
    },
  }, {
    path: 'vehicle',
    component: VehicleComponent,
    resolve: {
      vehicleCategories: VehicleCategoryResolver,
      vehicleOptions: VehicleOptionResolver
    },
  }, {
    path: 'territory',
    component: TerritoryComponent,
    resolve: {
      territoryOptions: TerritoryOptionResolver
    }
  },{
    path: 'token',
    component: TokenGenerationComponent
  }, {
    path: 'rider',
    component: RiderComponent
  }, {
    path: 'dispatch',
    component: DispatchSchemaComponent,
    resolve: {
      dispatchOrders: DispatchOrderResolver,
      dispatchModes: DispatchModeResolver
    }
  }]
}, {
  path: 'login',
  component: LoginComponent
}];

进行一些重定向

export const routes: Routes = [
  {
    path: '',
    component: MainComponent,
    children: [
      {
        path: '',
        redirectTo: 'callCenter'
      },
      {
        path: 'callCenter',
        component: CallCenterComponent,
        resolve: {
          countries: CountriesResolver
        },
      }, {
        path: 'vehicle',
        component: VehicleComponent,
        resolve: {
          vehicleCategories: VehicleCategoryResolver,
          vehicleOptions: VehicleOptionResolver
        },
      }
    ...

将MainComponent移到子路径也应该起作用

Moving the MainComponent to child routes should also work

export const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: '',
        component: MainComponent
      },
      {
        path: 'callCenter',
        component: CallCenterComponent,
        resolve: {
          countries: CountriesResolver
        },
      }, {
        path: 'vehicle',
        component: VehicleComponent,
        resolve: {
          vehicleCategories: VehicleCategoryResolver,
          vehicleOptions: VehicleOptionResolver
        },
      }
    ...

这篇关于无法匹配任何路线:“的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！