Angular9 设置通配符路由

当用户试图导航到那些不存在的应用部件时，在正常的应用中应该能得到很好的处理。要在应用中添加此功能，需要设置通配符路由。当所请求的 `URL 与任何路由器路径都不匹配时，Angular 路由器就会选择这个路由。

要设置通配符路由，请在 routes 定义中添加以下代码。

//AppRoutingModule (excerpt)


{ path: '**', component:  }

这两个星号 ** 告诉 Angular，这个 routes 定义是通配符路由。对于 component 属性，你可以使用应用中的任何组件。常见的选择包括应用专属的 PageNotFoundComponent，你可以定义它来向用户展示 404 页面，或者跳转到应用的主组件。通配符路由是最后一个路由，因为它匹配所有的 URL。有关路由顺序的更多详细信息，请参阅路由顺序。

显示 404 页面

要显示 404 页面，请设置一个通配符路由，并将 component 属性设置为你要用于 404 页面的组件，如下所示：

//AppRoutingModule (excerpt)


const routes: Routes = [
  { path: 'first-component', component: FirstComponent },
  { path: 'second-component', component: SecondComponent },
  { path: '',   redirectTo: '/first-component', pathMatch: 'full' }, // redirect to `first-component`
  { path: '**', component: FirstComponent },
  { path: '**', component: PageNotFoundComponent },  // Wildcard route for a 404 page
];

path 为 ** 的最后一条路由是通配符路由。如果请求的 URL 与前面列出的路径不匹配，路由器会选择这个路由，并把该用户送到 PageNotFoundComponent。

设置重定向

要设置重定向，请使用重定向源的 path、要重定向目标的 component 和一个 pathMatch 值来配置路由，以告诉路由器该如何匹配 URL。

//AppRoutingModule (excerpt)


const routes: Routes = [
  { path: 'first-component', component: FirstComponent },
  { path: 'second-component', component: SecondComponent },
  { path: '',   redirectTo: '/first-component', pathMatch: 'full' }, // redirect to `first-component`
  { path: '**', component: FirstComponent },
];

在这个例子中，第三个路由是重定向路由，所以路由器会默认跳到 first-component 路由。注意，这个重定向路由位于通配符路由之前。这里的 path: '' 表示使用初始的相对 URL（ '' ）。