Angular使用navigate方法通过相对路由跳转到子组件失效如何解决？

问题原因 #

1. 带前导斜杠的路由会被Angular识别为绝对路由，此时传入的relativeTo参数会直接失效。你写this.navigate(['/home'], { relativeTo: this.route })时，Angular会直接从根路由层级匹配home路径，你的根路由下没有直接配置home，只有login的子路由包含该路径，自然匹配失败，触发通配符规则跳转到login。
2. 若this.navigate(['home'], { relativeTo: this.route })也跳转失败，通常是两个前提不满足：
   • LoginViewComponent的模板中没有添加<router-outlet></router-outlet>标签：子路由对应的组件必须渲染在父路由组件的router-outlet容器中，缺少该标签子组件无法加载。
   • 调用navigate的上下文不是LoginViewComponent内部：如果你是在公共服务、其他组件中调用跳转方法，注入的ActivatedRoute实例不是当前login路由对应的激活路由，relativeTo指向的路径错误，自然无法匹配到子路由。

另外补充一个你示例中的错误：navigateByUrl方法接收的参数是字符串类型，你示例中写的this.navigateByUrl(['login/home'])是错误用法，正确写法为this.navigateByUrl('/login/home')。

解决方案 #

场景1：在LoginViewComponent内部跳转 #

确认模板已添加<router-outlet>，直接使用以下写法即可：

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

// 组件构造函数中注入依赖
constructor(private router: Router, private route: ActivatedRoute) {}

// 跳转逻辑
goToHome() {
  this.router.navigate(['home'], { relativeTo: this.route });
}

场景2：在login的其他子路由中跳转回home #

比如当前在catalog/:id页面，要跳转回同层级的home，可以用向上回退一级的写法：

this.router.navigate(['../home'], { relativeTo: this.route });

场景3：在外部服务/非login上下文跳转 #

如果无法拿到login对应的ActivatedRoute实例，建议直接使用绝对路径跳转即可：

this.router.navigate(['/login/home']);

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