Angular 2如果路径不存在，如何重定向到404或其他路径[重复]

Question

如果路径在 angular 2 中不存在，我试图重定向 404 / 其他路径

我尝试研究有一些方法可以用于角度 1 但不是角度 2。

这是我的代码：

@RouteConfig([
{
    path: '/news',
    name: 'HackerList',
    component: HackerListComponent,
    useAsDefault: true
},
{
    path: '/news/page/:page',
    name: 'TopStoriesPage',
    component: HackerListComponent
},
{
    path: '/comments/:id',
    name: 'CommentPage',
    component: HackerCommentComponent
}
])

例如，如果我重定向到/news/page/，那么它可以正常工作并返回一个空白页面，你如何处理这种情况？

Answer 1

适用于 v2.2.2 及更新版本

在 v2.2.2 及更高版本中，name 属性不再存在，不应用于定义路由。应使用 path 代替 name，并且路径上不需要前导斜杠。在这种情况下使用path: '404' 而不是path: '/404'：

 {path: '404', component: NotFoundComponent},
 {path: '**', redirectTo: '/404'}

适用于 v2.2.2 之前的版本

你可以使用{path: '/*path', redirectTo: ['redirectPathName']}:

{path: '/home/...', name: 'Home', component: HomeComponent}
{path: '/', redirectTo: ['Home']},
{path: '/user/...', name: 'User', component: UserComponent},
{path: '/404', name: 'NotFound', component: NotFoundComponent},

{path: '/*path', redirectTo: ['NotFound']}

如果没有路径匹配则重定向到NotFound路径

Answer 2

随着 Angular 继续发布，我遇到了同样的问题。根据版本 2.1.0，Route 界面如下所示：

export interface Route {
    path?: string;
    pathMatch?: string;
    component?: Type<any>;
    redirectTo?: string;
    outlet?: string;
    canActivate?: any[];
    canActivateChild?: any[];
    canDeactivate?: any[];
    canLoad?: any[];
    data?: Data;
    resolve?: ResolveData;
    children?: Route[];
    loadChildren?: LoadChildren;
} 

所以我的解决方案如下：

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: '404', component: NotFoundComponent },
    { path: '**', redirectTo: '404' }
];

Answer 3

我在 2.0.0 及更高版本上的首选选项是创建 404 路由并允许 ** 路由路径解析到相同的组件。这允许您记录和显示有关无效路由的更多信息，而不是可以隐藏错误的普通重定向。

简单的 404 示例：

{ path '/', component: HomeComponent },
// All your other routes should come first    
{ path: '404', component: NotFoundComponent },
{ path: '**', component: NotFoundComponent }

要显示不正确的路由信息​​，请在 NotFoundComponent 中添加到路由器的导入：

import { Router } from '@angular/router';

将其添加到 NotFoundComponent 的构造函数中：

constructor(public router: Router) { }

然后你就可以从你的 HTML 模板中引用它了，例如

The page <span style="font-style: italic">{{router.url}}</span> was not found.

Answer 4

正如 shaishab roy 所说，您可以在备忘单中找到答案。

但在他的回答中，给定的回应是：

{path: '/home/...', name: 'Home', component: HomeComponent}
{path: '/', redirectTo: ['Home']},
{path: '/user/...', name: 'User', component: UserComponent},
{path: '/404', name: 'NotFound', component: NotFoundComponent},

{path: '/*path', redirectTo: ['NotFound']}

由于某些原因，它对我不起作用，所以我尝试了：

{path: '/**', redirectTo: ['NotFound']}

它有效。小心别忘了你需要把它放在最后，否则你会经常出现 404 错误页面；）。

Answer 5

确保，使用写在代码底部的这个 404 路由。

语法类似于

{
    path: 'page-not-found', 
    component: PagenotfoundComponent
},
{
    path: '**', 
    redirectTo: '/page-not-found'
},

谢谢