Angular从v14升级到v17后路由匹配失败问题求助

问题根源 #

从Angular 14升级到15+版本后，嵌套路由的相对导航逻辑发生了细微调整。当在子路由组件（如/orders/create/type对应的组件）中进行导航时，若未明确指定导航的相对基准路径，路由会默认基于当前激活的完整子路由路径计算目标路径，导致实际生成的路由与配置不匹配；而直接通过URL访问时，路由从根路径开始匹配，因此能正确命中配置。

修复方案 #

方案1：使用绝对路径导航 #

在组件的导航代码中，直接使用以斜杠开头的绝对路径，确保路由从根路径开始匹配：

// 组件内导航代码
import { Router } from '@angular/router';

constructor(private router: Router) {}

navigateToAddress() {
  this.router.navigate(['/orders/create/address']);
}

方案2：使用相对路径并指定导航基准 #

如果需要保持相对导航的灵活性，可通过ActivatedRoute指定导航的基准路径（父路由）：

// 组件内导航代码
import { Router, ActivatedRoute } from '@angular/router';

constructor(private router: Router, private route: ActivatedRoute) {}

navigateToAddress() {
  // 相对于当前路由的父路由（即/orders/create）导航到address子路由
  this.router.navigate(['address'], { relativeTo: this.route.parent });
  // 或者通过上级路径导航
  // this.router.navigate(['../address'], { relativeTo: this.route });
}

验证路由配置 #

确保路由配置中的嵌套结构正确，子路由需定义在父路由的children数组内：

// 路由配置文件
const routes: Routes = [
  {
    path: 'orders',
    children: [
      {
        path: 'create',
        children: [
          { path: 'type', component: TypeComponent },
          { path: 'address', component: AddressComponent }
        ]
      }
    ]
  }
];

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