解决 Angular 路由重定向难题：默认路径与通配符路由的实战配置与最佳实践

实战背景与目标

默认路径的正确配置

在 Angular 路由中，默认路径用于将空路径重定向到首页。要使用 pathMatch: 'full'，否则若使用前缀匹配，可能导致路由重定向的误触发甚至循环跳转，从而影响首屏加载与用户体验。

如果没有正确处理默认路径，用户直接输入基地址时可能会进入未预期的页面，造成导航混乱。因此，确保默认路径的明确性是避免后续问题的关键步骤。

通配符路由的策略与风险

通配符路由 path: '**' 应放在路由表的末尾，以避免拦截到其他具体路径的匹配，导致不可预期的跳转。

常见做法是将通配符路由指向一个 NotFound 组件或统一的错误页，以提升用户体验和可维护性，同时为后续的 SEO 处理留出空间。

核心概念与最佳实践

pathMatch 与 redirectTo 的协作要点

redirectTo 与 pathMatch 的组合决定了路由匹配的粒度。默认路径应使用 pathMatch: 'full'，其他路由通常使用默认的 'prefix'，除非确有需求。

在设计重定向时，确保目标路径存在且不会造成重复重定向，避免使用空字符串作为目标，除非确实需要将根路径作为落脚点。

路由顺序、懒加载与错误处理

Angular 路由是按顺序自上而下逐条匹配的，因此需要保证 通配符路由放在最后，以免提前拦截其它具体路径。

对于大型应用，采用懒加载模块可以显著降低首屏资源压力，同时在错误处理上提供一致的用户体验，例如通过专门的 NotFound 页面处理未知路径。

代码实战演练

典型默认路由配置

以下示例展示了 默认路径重定向和基本路由结构，适合快速搭建路由骨架，同时保持后续的可扩展性。

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { NotFoundComponent } from './not-found/not-found.component';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' }, // 默认路径
  { path: 'home', component: HomeComponent },
  { path: '**', component: NotFoundComponent } // 通配符路由放最后
];

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

在这个示例中，空路径将被重定向到 /home，未知路径则转向 NotFoundComponent，从而提升用户体验并有利于后续的 SEO 处理。

带通配符的路由和 404 页面实现

为了提升 SEO 与 UX，建议为 NotFound 页面提供友好的内容以及返回导航，避免让用户被卡在错误页上。

// app-routing.module.ts 继续使用
const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
  { path: 'not-found', component: NotFoundComponent },
  { path: '**', redirectTo: '/not-found' } // 使用重定向的通配符
];

通过这种写法，通配符路由在末尾且经由统一的重定向页面处理，不仅避免了直接暴露的 404 入口，也为站点的 SEO 提供了更集中化的处理路径。