Angular 15如何将任意路径重定向至默认着陆页？

要实现所有访问路径（包括根路径）都单次重定向到指定着陆页，只需在Angular路由配置中通过通配符路由和根路径重定向结合实现，具体步骤如下：

1. 配置路由规则 #

在app-routing.module.ts文件中，按以下方式定义路由：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LandingPageComponent } from './landing-page/landing-page.component'; // 替换为你的着陆页组件实际路径

const routes: Routes = [
  // 先定义着陆页的明确路由
  { path: 'landingpage', component: LandingPageComponent },
  // 根路径（/）完全匹配时重定向到着陆页
  { path: '', redirectTo: '/landingpage', pathMatch: 'full' },
  // 通配符路由匹配所有未定义的路径，重定向到着陆页
  { path: '**', redirectTo: '/landingpage', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 关键说明 #

• pathMatch: 'full'：确保只有当路径完全匹配时才触发重定向，避免因部分匹配导致的重定向循环。
• 路由顺序：必须先定义landingpage的明确路由，再配置根路径和通配符重定向——Angular路由会按顺序匹配规则，这样landingpage路径不会被通配符路由捕获，保证重定向仅执行一次。
• 组件路径：确保LandingPageComponent的导入路径与你的项目结构一致，若组件位置不同需对应修改。

效果验证 #

• 访问https://localhost:6150/会直接重定向到https://localhost:6150/landingpage
• 访问任意未定义路径（如https://localhost:6150/hello）也会单次重定向到着陆页，不会出现循环跳转

内容的提问来源于stack exchange，提问作者Prabhakaran