Angular中routerLink与浏览器URL跳转正常，navigate方法失效问题

问题核心原因 #

你的navigate调用存在路径参数写法错误：

• 相对路径中不能使用带前导斜杠的路径（/edit），前导斜杠会被解析为绝对路径，直接忽略relativeTo的配置
• 路径数组结构不符合子路由匹配规则，正确的相对路径组合应该是[id, "edit"]，而非[1, "/edit"]

修复代码 #

修改editPhrase方法如下：

editPhrase() {
  // 替换为实际的phrase id变量，比如this.currentPhraseId
  const phraseId = 1;
  this.router.navigate([phraseId, "edit"], { relativeTo: this.route });
}

如果当前组件就是PhraseDetailComponent（对应phrases/:id路由），可以进一步简化：

editPhrase() {
  this.router.navigate(["edit"], { relativeTo: this.route });
}

额外验证项 #

• 确保this.route是正确注入的ActivatedRoute实例，组件构造函数需声明：

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

• 确认当前组件确实处于phrases/:id路由层级下，否则relativeTo的相对路径会匹配失败

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