javascript - Angular2 - 路由器不选择路由/主路径

Question

我有 Angular2 应用程序使用这个 Angular2 Webpack Starter 。在将其模块 (NotFoundModule) 添加到 app.module.ts 和所有内容后，我刚刚向我的 app.routes.ts 文件添加了一条后备路由效果很好，只是现在我的主路径 ('') 不再注册并且 NotFoundComponent 加载。代码如下:

import { Routes } from '@angular/router';
import { HomeComponent } from './home';
import { NotFoundComponent } from './notfound/notfound.component';

import { DataResolver } from './app.resolver';

export const ROUTES: Routes = [
  {
     path: '', component: HomeComponent },
  {
     path: 'getstarted', loadChildren: './getstarted#GetStartedModule'
  },
  {
     path: 'open-account', loadChildren: './open-account/#OpenAccountModule'
  },
  ...
  ...
  ...
  {
    path: '**', component: NotFoundComponent
  },
];

如何解决此问题，以便我的 Home 路由再次正常工作，并且 NotFoundComponent 不会加载到其位置？

Answer 1

当您的路由使用 '' 作为其路径并且没有子路由时，您需要为该路由指定 pathMatch: 'full'。

export const ROUTES: Routes = [
  {
     path: '', pathMatch: 'full', component: HomeComponent },
  {
     path: 'getstarted', loadChildren: './getstarted#GetStartedModule'
  },
  {
     path: 'open-account', loadChildren: './open-account/#OpenAccountModule'
  },
  ...
  ...
  ...
  {
    path: '**', component: NotFoundComponent
  },
];

参见https://angular.io/docs/js/latest/api/router/index/Routes-type-alias.html#!#matching-strategy出于推理。