Angular 14空路由重定向失效，求助跳转至Search组件的方案

核心问题分析 #

你遇到的空路由（/）不跳转，大概率是两个常见的Angular路由配置误区导致的：pathMatch属性缺失/配置错误，或者父组件缺少路由出口。

第一种配置（根路由重定向）的问题修复 #

如果你的根路由配置类似下面的写法，问题出在pathMatch属性的默认行为：

// 错误写法：默认pathMatch为'prefix'，无法触发重定向
const routes: Routes = [
  { path: '', redirectTo: '/search' }, // 缺少pathMatch: 'full'
  { path: '', component: BasicLayoutComponent, children: [...] },
  { path: 'search', component: SearchComponent },
  { path: '**', redirectTo: '/search' }
];

Angular路由默认的pathMatch是prefix，意思是只要路径开头匹配就会触发。当访问空路径时，path: ''会匹配所有路径的前缀（包括空路径），但因为后面还有一个path: ''的组件路由，Angular会优先匹配加载BasicLayout，而非触发重定向。

修复方法：给根重定向路由加上pathMatch: 'full'，确保只有当路径完全为空时才触发重定向，并且把这条路由放在最前面：

// 正确写法
const routes: Routes = [
  { path: '', redirectTo: '/search', pathMatch: 'full' }, // 必须添加full
  { path: '', component: BasicLayoutComponent, children: [...] },
  { path: 'search', component: SearchComponent },
  { path: '**', redirectTo: '/search' }
];

第二种配置（BasicLayout子路由重定向）的问题修复 #

如果你的配置是把重定向放在BasicLayout的子路由里，需要检查两个关键项：

1. 子路由的pathMatch配置
2. BasicLayout组件是否包含<router-outlet>

错误示例：

// 路由配置
const routes: Routes = [
  { 
    path: '', 
    component: BasicLayoutComponent, 
    children: [
      { path: '', redirectTo: 'search' }, // 缺少pathMatch: 'full'
      { path: 'search', component: SearchComponent }
    ]
  },
  { path: '**', redirectTo: '/search' }
];

// BasicLayout组件模板（错误：无路由出口）
<div class="layout">
  <!-- 仅布局元素，没有<router-outlet>，子路由无法渲染 -->
</div>

修复方法：

• 子路由的空路径重定向必须加pathMatch: 'full'，否则会触发无限重定向（prefix匹配会持续命中空路径）
• 在BasicLayout的模板中添加<router-outlet></router-outlet>，用来承载子路由组件的渲染

// 正确的路由配置
const routes: Routes = [
  { 
    path: '', 
    component: BasicLayoutComponent, 
    children: [
      { path: '', redirectTo: 'search', pathMatch: 'full' }, // 添加full
      { path: 'search', component: SearchComponent }
    ]
  },
  { path: '**', redirectTo: '/search' }
];

// BasicLayout组件模板（正确：添加路由出口）
<div class="layout">
  <!-- 其他布局元素 -->
  <router-outlet></router-outlet> <!-- 必须存在此标签 -->
</div>

额外注意：路由匹配顺序 #

Angular路由是从上到下按顺序匹配的，重定向路由一定要放在对应的组件路由前面，否则会被后面的路由拦截。比如如果把path: ''的BasicLayout路由放在重定向路由前面，重定向永远不会触发。

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