重定向错误 404 Angular 5

Question

当 url 错误 http://localhost:8100/#/login 时，我正在尝试处理 404 错误。这是我的登录 url，如果我写类似 http:.../loginasdasd 的内容，我想自动打开我自己的 NotFoundPage。

const appRoutes3: Routes = [
  {
    path: '',
    children: [
      {
         path: 'login',
         component: LoginPage
      },
      { path: 'login**', redirectTo: '/notfound' }
   ]
 },
 { path: 'notfound', component: NotFoundPage }
];


RouterModule.forRoot(
  appRoutes3,
  { enableTracing: true } // <-- debugging purposes only
)
,
IonicModule.forRoot(MyApp, {}, {
  links: [
    { component: HomePage, name: "Home", segment: "" },
    { component: LoginPage, name: "Login", segment: "login", defaultHistory: [HomePage] },
    { component: SubscribePage, name: "Signup", segment: "signup", defaultHistory: [HomePage] },
    { component: SubscribeExtendPage, name: "Signup", segment: "signup-extend", defaultHistory: [HomePage] },
    { component: MainPage, name: "Main", segment: "main", defaultHistory: [HomePage] },
    { component: WelcomePage, name: "Welcome", segment: "welcome" },
    { component: NotFoundPage, name: "notFound", segment: "login/**", defaultHistory: [HomePage] },
  ]
}
)
],

我是一个 angular 菜鸟，我不知道如何正确地做到这一点，我发现的最好的信息是 https://vsavkin.com/angular-router-understanding-redirects-2826177761fc 在其他一些 angular 重定向帖子中。

请提供帮助或任何线索将不胜感激。谢谢

Answer 1

As Angular 尝试按照您在 Routes 数组中声明的顺序匹配路由。你可以这样做：

const appRoutes3: Routes = [
  {
    path: '',
    children: [
      {
         path: 'login',
         component: LoginPage
      }
 },
 { path: '**', component: NotFoundPage }
];

但如果您真的想要一条路线 /notfound，请将 redirectTo: '/notfound' 更改为 redirectTo: 'notfound'。

Answer 2

您需要使用通配符 (**)。 ** 路径应该是最后一条路线。如果请求的 URL 与配置中定义的路由的任何路径都不匹配，路由器将 select 此路由。这对于显示“404 - 未找到”页面或重定向到另一条路线很有用。

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'hero/:id',      component: HeroDetailComponent },
  {
   path: 'heroes',
   component: HeroListComponent,
 data: { title: 'Heroes List' }
 },
 {  path: '',
 redirectTo: '/heroes',
 pathMatch: 'full'
 },
 { path: '**', component: PageNotFoundComponent }
];

希望对您有所帮助。

Answer 3

下面的代码在我的例子中工作正常，

{ path: '404', component: PageNotFoundComponent }

在您的 app.component.ts

中添加以下代码

constructor(private router: Router) {
    this.router.errorHandler = (error: any) => {
        let routerError = error.toString();
        if (routerError.indexOf('Cannot match any routes') >= 0 ) {
           this.router.navigate(['/404']);
        } else {
           throw error;
        }
    }
  }

重定向错误 404 Angular 5

Redirect error 404 Angular 5

http-status-code-404

angular