2

例如，如何路由到相同的组件但具有不同的 url 和不同的数据

/exports/open  -  ExportsListComponent data: {exportstatus: 'open'}

/exports/submitted - ExportsListComponent data: {exportstatus: 'submitted'}

/exports/completed - ExportsListComponent data: {exportstatus: 'completed'}

这是我尝试做的，我还有其他使用 ExportComponent 但具有类似路由的路由，例如exports/:exportId。

      { path: 'exports/jobs/:exportJobId', component: ExportComponent, canActivate: [RouteGuard], resolve: { exportJob: ExportJobResolver }, data: { allowed: ['inv', 'cr'] } },
      { path: 'exports/:exportId', component: ExportComponent, canActivate: [RouteGuard], resolve: { export: ExportResolver }, data: { allowed: ['inv', 'cr'] } },
      { path: 'exports', component: ExportsListComponent,
      children: [
        { path: 'open', component: ExportsListComponent ,  data: {exportstatus: 'open'}},
        { path: 'submitted', component: ExportsListComponent,  data: {exportstatus: 'submitted'} },
        { path: 'completed', component: ExportsListComponent, data: {exportstatus: 'completed'} }
      ],

当我使用 /exports/open 访问 url 时遇到的问题是路由到 ExportComponent 而不是 ExportListComponent。如何使用 url 路由到导出/打开并路由到 ExportListComponent，而不是 ExportComponent。问题是当我路由到 /exports/open 时，它会认为 'open' 是一个 id，但我需要路由到 ExportListComponent

4

2 回答 2

5

根据官方文档：

配置中路由的顺序很重要，这是设计使然。路由器在匹配路由时使用先匹配获胜策略，因此更具体的路由应该放在不太具体的路由之上。

因此，您必须将 exports/:exportId 路由条目移到 export 条目下方。

像这样

  { path: 'exports/jobs/:exportJobId', component: ExportComponent, canActivate: [RouteGuard], resolve: { exportJob: ExportJobResolver }, data: { allowed: ['inv', 'cr'] } },
  { path: 'exports', component: ExportsListComponent,
  children: [
    { path: 'open', component: ExportsListComponent ,  data: {exportstatus: 'open'}},
    { path: 'submitted', component: ExportsListComponent,  data: {exportstatus: 'submitted'} },
    { path: 'completed', component: ExportsListComponent, data: {exportstatus: 'completed'} }
  ],
  {path: 'exports/:exportId', component: ExportComponent, canActivate: [RouteGuard], resolve: { export: ExportResolver }, data: { allowed: ['inv', 'cr'] } },
于 2019-03-12T10:45:24.700 回答
0

那是因为您的子路径符合上述规则：path: 'exports/:exportId'

你必须重新安排你的路线。path: 'exports/:exportId'应该最后

或者，也许您实际上应该更改路线，以便完全消除这种歧义。

于 2019-03-12T10:48:39.090 回答