重定向错误 404 Angular 5

Question

我试图在 url 错误时处理 404 错误，http://localhost:8100/#/login。这是我的登录 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] },
  ]
}
)
],

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

请一些帮助或任何线索将不胜感激。谢谢。

Answer 1

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

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 }
];

希望这可以帮助。