Angular路由：routerLink与router.navigate跳转异常及规则咨询

我明白你遇到的这种困惑——Angular路由的辅助路由处理确实容易让人摸不着头脑，尤其是routerLink和router.navigate()的行为差异。其实核心原因在于两者对当前路由上下文的处理方式不同，只要记住几个简单规则，就能轻松搞定这类问题：

• 必须手动指定相对路由上下文
  routerLink之所以能自动生成正确的相对路径，是因为它默认会基于当前激活的路由（ActivatedRoute）来计算。但router.navigate()不会，所以你必须显式传入{ relativeTo: this.route }（这里的this.route是你组件中注入的ActivatedRoute实例），让路由系统知道要基于当前路由来更新，而不是从根路由重新开始。

• 合并现有辅助路由，避免丢失
  当你要添加新的辅助路由时，router.navigate()默认只会保留你在outlets对象里指定的路由，会把其他已激活的辅助路由清空。这就是为什么你的aux路由消失了。解决方法是先获取当前路由快照里的所有已激活outlet状态，再合并你要新增的部分：

  // 先在组件构造函数注入 ActivatedRoute 和 Router
  // constructor(private route: ActivatedRoute, private router: Router) {}
  
  const currentOutlets = { ...this.route.snapshot.outlets };
  // 更新你需要的outlet
  currentOutlets['blogoutlet'] = ['steemblog'];
  // 基于当前路由导航
  this.router.navigate([{ outlets: currentOutlets }], { relativeTo: this.route });
  

  这样就能保留原来的aux路由，同时添加blogoutlet的路由。

• 明确完整的outlets配置（可选）
  如果你清楚当前所有需要激活的辅助路由，也可以直接写出完整的outlets对象，不需要合并现有状态：

  this.router.navigate([
    { 
      outlets: { 
        'aux': ['crypto', '5a599f35af967b0017d1be6f'],
        'blogoutlet': ['steemblog']
      }
    }
  ], { relativeTo: this.route });
  

  这种方式适合你能完全掌控当前路由状态的场景。

总结一下：routerLink是“懒人友好”的隐式模式，自动继承当前路由上下文和所有outlet状态；而router.navigate()是“精确控制”的显式模式，你必须告诉它基于哪个路由，以及要保留哪些现有路由，才能达到和routerLink一样的效果。

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