Angular路由路径无法显示EditconfigComponent问题求助

问题核心是Angular路由匹配顺序导致的：路由规则按从上到下的顺序匹配，你当前把config静态路由放在了动态路由:app之后，当访问/config时，Angular会将config识别为:app的参数值，优先匹配RepositoryComponent，而非EditconfigComponent。

解决办法：调整路由顺序 #

将静态路由config移到所有动态路由（带:param格式的路由）之前，确保静态路径优先被匹配。

修改后的完整路由配置代码：

import { Routes } from '@angular/router';
import {OverviewComponent} from "./components/overview/overview.component";
import {ArtifactComponent} from "./components/artifact/artifact.component";
import {RepositoryComponent} from "./components/repository/repository.component";
import {VersionComponent} from "./components/version/version.component";
import {VariablesComponent} from "./components/variables/variables.component";
import {EditconfigComponent} from "./components/editconfig/editconfig.component";


export const appRoutes: Routes = [
  { path: '', component: OverviewComponent, pathMatch: 'full' },
  { path: 'config', component: EditconfigComponent}, // 静态路由前置
  { path: ':app', component: RepositoryComponent },
  { path: ':app/:repo', component: VersionComponent },
  { path: ':app/:repo/var', component: VariablesComponent},
  { path: ':app/:repo/:version', component: ArtifactComponent },
];

调整后，访问/config时，Angular会优先匹配静态路由规则，正确加载EditconfigComponent；动态路由仅匹配非静态的参数类路径（如/my-app）。

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