Angular 10手动输入/edit无id参数跳转首页问题如何修复？

问题根因 #

你配置的路由规则edit/:id中的:id属于必填路由参数，直接访问/edit时没有携带该参数，Angular无法匹配到对应路由规则，默认回退到根路径/，也就是你看到的自动跳首页的现象。

修复方案 #

方案1：允许不带id访问/edit（可复用为新增员工页面） #

新增一条无参的edit路由规则，同时适配组件内逻辑：

1. 调整路由配置：

const appRoutes: Routes = [
  {path: '', component:EmployeesComponent},
  // 新增无参路由，对应新增员工场景
  {path: 'edit', component:EmployeeEditComponent},
  {path: 'edit/:id', component:EmployeeEditComponent}
]

2. 在EmployeeEditComponent中区分场景逻辑：

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

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  const empId = this.route.snapshot.paramMap.get('id');
  if(empId) {
    // 编辑场景：根据empId请求员工详情填充表单
  } else {
    // 新增场景：初始化空白表单
  }
}

方案2：禁止直接访问/edit，自定义跳转规则 #

如果不需要无参的edit页面，可以配置明确的跳转规则避免默认回退首页：

方式A：访问/edit直接跳首页

const appRoutes: Routes = [
  {path: '', component:EmployeesComponent},
  {path: 'edit', redirectTo: '/'},
  {path: 'edit/:id', component:EmployeeEditComponent}
]

方式B：所有不匹配路径跳404页面

const appRoutes: Routes = [
  {path: '', component:EmployeesComponent},
  {path: 'edit/:id', component:EmployeeEditComponent},
  // 提前实现NotFound404组件
  {path: '404', component: NotFound404Component},
  // 通配符路由要放在最后，匹配所有未命中规则的路径
  {path: '**', redirectTo: '/404'}
]

额外优化建议 #

编辑按钮的routerLink建议改成绝对路径形式，避免嵌套路由场景下出现相对路径跳转错误：

<td><button class="btn btn-warning btn-sm mx-2" routerLink="/edit/{{ emp.id }}">Edit</button></td>

同时确认@NgModule的imports数组中已经正确导入RouterModule.forRoot(appRoutes)，根组件模板中存在<router-outlet></router-outlet>路由占位符，这是路由生效的基础前提。

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