Angular 11 带参数路由配置后test2路由跳转页面不更新问题咨询

Angular的路由采用从上到下优先匹配、命中即终止的规则。你当前的路由配置中，动态参数路由:id的顺序在静态路由test2之前，当你访问/test2路径时，Angular会把路径中的test2识别为:id参数的取值，直接命中第二个路由规则渲染TestComponent，不会继续向下匹配到test2对应的路由规则，因此出现地址栏路径更新但页面内容不跳转的问题。

调整路由配置的顺序，将静态路由放在动态参数路由之前即可，修改后的路由配置如下：

const routes: Routes = [
  {
    path: "",
    pathMatch: 'full',   
    component: TestComponent
  },
  // 静态路由优先放在前面
  {
    path: "test2",   
    component: Test2Component
  },
  // 动态参数路由放在静态路由之后
  {
    path: ":id",
    component: TestComponent
  },
];

调整后访问/test2会优先命中静态路由规则，正确渲染Test2Component，带参数的路径比如/123会匹配后续的动态路由规则，原有功能不受影响。

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