Question

我有以下路由器对象

const appRoutes: Routes = [
  { path: '', redirectTo: '/', pathMatch:'full'},
  { path: '', component: MainComponent },
  { path: 'signin', component:SigninComponent},
  { path: 'signup', component: SignupComponent},
  { path: 'dashboard', component: DashboardComponent,
    children: [
      { path: '', redirectTo:'/dashboard/overview', pathMatch: 'full'},
      { path: 'overview', component: OverviewCampaignsComponent },
      { path: 'active', component: ActiveCampaignsComponent},
      { path: 'history', component: HistoryCampaignsComponent}
    ] }

]

除了包含redirectTo的路由外，一切正常。如果我输入例如/ dashboard / dsadadasdasd3213，我在控制台上出现错误

core.es5.js：1084 ERROR错误：未捕获（在承诺中）：错误：无法匹配任何路线。网址细分：＆＃39;仪表板/ dsadadasdasd3213＆＃39;错误：无法匹配任何路线。网址细分：＆＃39;仪表板/ dsadadasdasd3213＆＃39;

如果我输入/ asdasdqweqwe，我会收到类似的错误。这里看起来有什么不对？非常感谢你！

Answer 1

创建一个404错误处理组件Error404Component并尝试添加带通配符的路径以匹配未指定的每个路径并路由到它：如下所示：

   const appRoutes: Routes = [
      { path: '', redirectTo: '/', pathMatch:'full'},
      { path: '', component: MainComponent },
      { path: 'signin', component:SigninComponent},
      { path: 'signup', component: SignupComponent},
      { path: 'dashboard', component: DashboardComponent,
        children: [
          { path: '', redirectTo:'/dashboard/overview', pathMatch: 'full'},
          { path: 'overview', component: OverviewCampaignsComponent },
          { path: 'active', component: ActiveCampaignsComponent},
          { path: 'history', component: HistoryCampaignsComponent}
          { path: '**', component: Error404Component}
        ] }

    ]

Answer 2

添加后备路线

{路径：'**'，redirectTo：'session / 404'}

请查看以下代码以获得更多理解......

export const AppRoutes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full'},
  // users routes
  {
    path: '',
    component: AdminLayoutComponent,
    children: [
      { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' },
      { path: 'containers', loadChildren: './containers/containers.module#ContainersModule' },
      { path: 'groupcontainers', loadChildren: './group-containers/group-containers.module#GroupContainersModule' },
      { path: 'mypublickeys', loadChildren: './public-keys/public-keys.module#PublicKeysModule' },
      { path: 'myservers', loadChildren: './my-servers/my-servers.module#MyServersModule' },
      { path: 'group', loadChildren: './group/group.module#GroupModule' },
      { path: 'admin', loadChildren: './admin/admin.module#AdminModule'}
    ],
    canActivate: [AuthGuardService]
  },
  //  non authentication routes
  {
    path: '',
    component: AuthLayoutComponent,
    children: [
      { path: '', loadChildren: './session/session.module#SessionModule'}
    ]
  },
  { path: '**', redirectTo: 'session/404' }
];

Angular 4：后备路由（pathMatch）没有正确地重定向到回退网址，错误：未捕获（在承诺中）：错误：无法匹配任何路由

2 个答案: