Angular访问/nuevaskill组件时自动重定向至首页问题求助

针对点击添加按钮路由到/nuevaskill时自动重定向首页的问题，按以下步骤排查解决：

1. 检查表单默认提交行为 #

如果添加按钮嵌套在<form>标签内，点击会触发浏览器默认表单提交，导致页面刷新跳转至首页（表单action默认指向根路径）。

解决方式：

• 给按钮指定type="button"，避免触发表单提交：

<button type="button" (click)="goToNewSkill()">添加技能</button>

• 或在点击事件中阻止默认行为：

goToNewSkill(event: Event) {
  event.preventDefault();
  this.router.navigate(['/nuevaskill']);
}

2. 排查路由守卫配置 #

查看路由模块中/nuevaskill对应的CanActivate/CanActivateChild守卫，确认是否存在错误的权限拦截逻辑，导致未满足条件时强制重定向到首页。

排查点：

• 检查路由定义中的守卫配置：

const routes: Routes = [
  // 其他路由
  { path: 'nuevaskill', component: NuevaSkillComponent, canActivate: [AuthGuard] }
];

• 查看守卫类的canActivate方法，确认重定向逻辑是否正确：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
  if (!this.authService.isAdmin()) {
    this.router.navigate(['/']);
    return false;
  }
  return true;
}

（确保仅在权限不足时才触发重定向，而非错误拦截合法访问）

3. 修正路由配置的重定向规则 #

确认路由模块中是否存在优先级错误的通配符重定向，导致/nuevaskill被错误匹配：

错误示例：

const routes: Routes = [
  { path: '', redirectTo: '/', pathMatch: 'full' },
  { path: '**', redirectTo: '/' }, // 通配符路由放在具体路由前，会优先匹配
  { path: 'nuevaskill', component: NuevaSkillComponent }
];

修正方案：将具体路由放在通配符路由之前：

const routes: Routes = [
  { path: '', redirectTo: '/', pathMatch: 'full' },
  { path: 'nuevaskill', component: NuevaSkillComponent },
  { path: '**', redirectTo: '/' }
];

4. 检查组件内的跳转逻辑 #

确认触发跳转的方法中是否存在冗余代码，导致跳转后又触发首页重定向：

排查点：

• 查看跳转方法，避免重复调用路由跳转：

goToNewSkill() {
  this.router.navigate(['/nuevaskill']);
  // 移除多余的 this.router.navigate(['/']) 代码
}

• 检查组件生命周期钩子（如ngOnInit）中是否存在自动重定向逻辑。

5. 分析路由追踪日志 #

从你提供的控制台路由追踪截图中，重点关注：

• 是否存在多次跳转流程（先到/nuevaskill，再立即跳转到/）
• 是否有路由守卫返回false并触发重定向的日志
• 是否有路由匹配失败的错误提示

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