ASP.NET Core搭配Angular开发时edit/id路由匹配失效问题

你的路由匹配失败是因为app-routing.module.ts中带参数的编辑路由定义格式错误：
当前你写的路由规则是{path:'genres/edit:id', component:EditGenreComponent}，这种写法表示edit和参数id之间没有分隔符，只有访问/genres/edit1这类路径才能匹配成功，而你实际访问的是/genres/edit/1，路径中间多了斜杠，自然匹配不到对应路由，最终触发通配符**规则重定向到首页。
另外你当前的首页路由{path:' ', component:HomeComponent}的path值里多了多余空格，也会存在匹配异常的隐患。

1. 修正所有路由的格式错误，一是去掉首页路由path的多余空格，二是在所有带id参数的编辑路由的edit和:id之间添加斜杠分隔：

const routes: Routes = [
  // 修正首页路由，去掉path里的多余空格
  {path:'', component:HomeComponent},
  {path:'genres', component:IndexGenresComponent},
  {path:'genres/create', component:CreateGenreComponent},
  // 加斜杠分隔edit和参数
  {path:'genres/edit/:id', component:EditGenreComponent},
  {path:'actors', component:IndexActorsComponent},
  {path:'actors/create', component:CreateActorComponent},
  {path:'actors/edit/:id', component:EditActorComponent},
  {path:'movietheaters', component:IndexMovieTheaterComponent},
  {path:'movietheaters/create', component:CreateMovieTheaterComponent},
  {path:'movietheaters/edit/:id', component:EditMovieTheaterComponent},
  {path:'movies/create', component:CreateMovieComponent},
  {path:'movies/edit/:id', component:EditMovieComponent},
  {path:'**',redirectTo:''}
];

2. 修正后重启前端服务，再次访问http://localhost:4200/genres/edit/1即可正常命中编辑路由，不会再跳转到首页。后续你可以在edit-genre.component.ts的params订阅逻辑中通过params['id']获取到路径传入的id值，用来请求对应分类的数据。

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