Angular路由报Cannot match any routes 如何让SettingsComponent渲染到full-width命名router-outlet

错误原因 #

你遇到的路由匹配失败问题有两个核心原因：

• Angular进行路由匹配时，会同时校验所有<router-outlet>对应的路由规则。你当前仅为full-width命名出口配置了settings路径的规则，未给默认无名称的主出口配置对应settings路径的匹配规则，访问/settings时主出口无匹配规则就会抛出错误。
• 命名出口的路由默认无法通过直接输入/settings的方式触发匹配，Angular需要额外的标识确认该路径对应哪个出口。

解决方案 #

以下提供三种适配不同场景的解决方案： #

方案1：调整路由配置，支持直接访问/settings路径 #

如果需要用户直接在地址栏输入/settings就能正常加载，修改路由配置为嵌套结构，将命名出口的路由挂载到主出口的空路径下即可：

const routes: Routes = [
  {
    path: 'settings',
    children: [
      // 主出口不需要渲染内容时可以配置空路由，有内容需求替换为对应组件即可
      { path: '' },
      { path: '', component: SettingsComponent, outlet: 'full-width' }
    ]
  }
];

该配置可以保持路径干净为/settings，无需修改跳转逻辑。 #

方案2：页面内routerLink跳转时显式指定出口 #

如果仅需要通过页面内链接跳转访问，不需要支持地址栏直接输入/settings，不需要修改现有路由配置，调整跳转的routerLink写法即可：

<a [routerLink]="[{ outlets: { 'full-width': ['settings'] } }]">打开设置页</a>

该方式生成的URL格式为/(full-width:settings)，Angular可以直接匹配你现有的路由规则。 #

方案3：TS代码内跳转时指定出口 #

如果是在逻辑代码中触发跳转，不需要修改现有路由配置，调用路由API时指定出口参数即可：

import { Router } from '@angular/router';

constructor(private router: Router) {}

navToSettings() {
  this.router.navigate([{ outlets: { 'full-width': ['settings'] } }]);
}

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