Angular全局导航RouterLink相对路径失效，始终跳转至根路径求助

开发者阿泽

2026-7-1

Angular多租户全局导航相对路由修复方案

问题根源

你的全局导航放在AppComponent里、router-outlet之前，这部分DOM属于根路由上下文，Angular解析相对路径时只会以根路由（/）为基准，所以./page1会被解析成/page1，而非租户子路由下的路径。而子组件是通过router-outlet渲染的，继承了当前租户的路由上下文，所以相对路由正常。

三种解决办法

1. 用绝对路由结合当前租户参数

先获取当前的tenantUrl，再拼接成绝对路径：

组件代码：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  currentTenant = '';

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    // 监听租户参数变化
    this.route.firstChild?.paramMap.subscribe(params => {
      this.currentTenant = params.get('tenantUrl') || '';
    });
  }
}

模板代码：

<a [routerLink]="['/tenantSpace', currentTenant, 'page1']">Page1</a>
<a [routerLink]="['/tenantSpace', currentTenant, 'page2']">Page2</a>
<router-outlet></router-outlet>

2. 手动指定相对路由的上下文

给routerLink加上relativeTo参数，指向当前激活的租户子路由：

组件代码：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(public route: ActivatedRoute) {}
}

模板代码：

<a [routerLink]="['./page1']" [relativeTo]="route.firstChild">Page1</a>
<a [routerLink]="['./page2']" [relativeTo]="route.firstChild">Page2</a>
<router-outlet></router-outlet>