27

如果输入了无效路径，是否有任何方法可以将 Angular2 路由器配置为重定向到特定路由？

例如，如果我有三个路线：
/home
/about
/404

我输入 /trains （一条路线，不在路线配置中），我希望路由器将我重定向到 404。

4

1 回答 1

43

更新新的@angular/router

'**'新路由器通过路径规范更好地处理丢失的路由。

在你的 rootRouterConfig中，添加一个组件作为包罗万象将在根级别和任何嵌套的子级中捕获不正确的路由，这意味着你只需要在最顶层包含它。以 ng2 hero 为例，如下所示：

export const routes:RouterConfig = [
  ...HeroesRoutes,
  { path: 'crisis-center', component: CrisisListComponent },
  // Show the 404 page for any routes that don't exist.
  { path: '**', component: Four04Component }
];

根据Sharpmachine 的评论，确保所有包罗万象的路线都列在任何其他路线之后。当前的路由器似乎基于“第一次匹配”（快速样式）路由，而不是“特异性”（nginx 样式），尽管由于其不稳定程度，将来可能会发生变化。最后列出包罗万象应该在这两种情况下都有效。

@angular/router-deprecated 的原始答案

我也没有找到任何关于这方面的好信息，以及走向最终 ng2 版本的正确模式可能是什么。不过，在测试版中，我发现了以下作品。

constructor(
  private _router: Router,
  private _location: Location
) {
  _router.recognize(_location.path()).then((instruction: Instruction) => {
    // If this location path is not recognised we receive a null Instruction
    if (!instruction) {
       // Look up the 404 route instruction
       _router.recognize('/404').then((instruction: Instruction) => {
         // And navigate to it using navigateByInstruction
         // 2nd param set to true to keep the page location (typical 404 behaviour)
         // or set to false to 'redirect' the user to the /404 page 
         _router.navigateByInstruction(instruction, true);
      });
    }
  });
}

我发现这段代码也适用于子路线。即，如果您/cars/...在 RouteConfig 中有并且位置路径与您的任何子汽车路线都不匹配，您将收到父级指令的空值。这意味着您只需要在顶层的主要组件中使用此代码。

我希望将来有一种更简单、更明确的方法来做到这一点。

于 2015-12-29T04:34:57.450 回答