Angular路由跳转异常：路径追加login导致路由匹配失败

问题原因分析 #

你遇到的问题核心在于Angular路由的相对路径与绝对路径的区别。当你在LoginComponent（当前路由处于/login）中调用this.router.navigate([''])时，Angular默认会将这个空数组视为相对当前激活路由的路径，而不是根路径。

也就是说，Angular会尝试从当前的/login路由出发，寻找同级或子级的空路径路由，但你的路由配置里并没有为/login设置子路由，最终导致路由解析异常，拼接出了login/home这个不存在的路由，触发Cannot match any routes错误。

解决方案 #

这里提供两种靠谱的解决方式，你可以根据需求选择：

1. 使用绝对路径跳转

直接在navigate的参数中使用以/开头的绝对路径，确保路由跳转到根路径下的目标页面：

// 跳转到根路径的空路由（对应你的HomeComponent）
this.router.navigate(['/']);

// 或者直接跳转到/home路由，更直观
this.router.navigate(['/home']);

这种方式最直接，不管当前处于哪个路由下，都会准确跳转到根路径对应的目标页面。

2. 优化路由配置，添加重定向

建议你调整路由配置，将空路径重定向到/home，这样既符合路由设计的最佳实践，也能避免路径歧义：

const routes: Routes = [
  // 将空路径重定向到/home，pathMatch: 'full'确保完全匹配根路径
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent, canActivate: [AuthGuardService] },
  { path: 'login', component: LoginComponent },
  { path: 'register', component: RegisterComponent }
];

配置完成后，调用this.router.navigate(['/'])就会自动重定向到/home，同时用户直接访问根路径http://localhost:4200/也会跳转到首页，体验更流畅。

额外提示 #

如果你确实需要使用相对路径跳转，可以通过relativeTo参数指定相对的路由节点，比如跳转到当前路由的父级：

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

constructor(private router: Router, private route: ActivatedRoute) {}

// 相对当前路由的父级跳转
this.router.navigate(['../'], { relativeTo: this.route });

不过在你的场景下，显然绝对路径或重定向的方式更合适。

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