Angular相对路由未按预期生效：带商户ID路径跳转异常求助

1. HTML语法错误：卡片组件内存在<a>标签嵌套，浏览器解析时会自动将嵌套的<a>标签移出父级<a>，破坏原有结构，导致routerLink绑定的上下文异常。
2. 路由配置层级问题：当前所有路由均为平级配置，没有嵌套结构。你定义的:mid/index属于根级路由，没有对应的:mid父路由节点，使用相对路径../时会直接回退到站点根路径，所以不管当前路径是否带商户ID，最终都会拼接为/test2。
3. 路由重复配置：带/不带商户ID的两套路由完全重复，后续维护成本高。

方案1（推荐，路由结构优化） #

步骤1：修复HTML嵌套错误 #

调整卡片组件结构，避免<a>标签嵌套：

<div class="solution_card">
  <div class="hover_color_bubble"></div>
  <a *ngFor="let icon of defaultMenu.icons" [routerLink]="icon.link" class="float-start icons">
    <i [class]="icon.title"></i>
  </a>
  <a [routerLink]="['../test2']">
    <div class="so_top_icon">
      <img [src]="defaultMenu.img" />
    </div>
    <div class="solu_title">
      <h3>{{defaultMenu.title}}</h3>
    </div>
    <div class="solu_description">
      <p>
        {{defaultMenu.subTitle}}
      </p>
    </div>
  </a>
</div>

步骤2：重构路由为嵌套结构 #

收拢重复的路由配置，把业务路由放到对应父节点下：

export const routes: Routes = [
  // 带商户ID的路由组
  {
    path: ':mid',
    children: [
      {
        path: 'profile',
        loadChildren: () => import('./pages/profile/profile.module').then(m => m.ProfileModule),
      },
      {
        path: 'bill',
        loadChildren: () => import('./pages/bill/bill.module').then(m => m.BillModule),
      },
      {
        path: 'index',
        component: IndexComponent,
      },
      // 补充test2对应路由配置
      {
        path: 'test2',
        component: Test2Component
      }
    ]
  },
  // 不带商户ID的路由组
  {
    path: '',
    children: [
      {
        path: 'profile',
        loadChildren: () => import('./pages/profile/profile.module').then(m => m.ProfileModule),
      },
      {
        path: 'bill',
        loadChildren: () => import('./pages/bill/bill.module').then(m => m.BillModule),
      },
      {
        path: 'index',
        component: IndexComponent,
      },
      {
        path: 'test2',
        component: Test2Component
      }
    ]
  },
  {
    path: 'auth-callback',
    component: AuthCallBackComponent,
  },
  { path: '', redirectTo: 'index', pathMatch: 'full' },
  { path: '**', redirectTo: 'pages' },
];

重构后相对路径会自动按当前路由层级计算：

• 访问/121/index时，../test2会解析为/121/test2
• 访问/index时，../test2会解析为/test2

方案2（无需改路由，适合快速修复） #

在公共组件内注入ActivatedRoute，动态拼接跳转路径：

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

export class 你的卡片组件名 {
  constructor(private route: ActivatedRoute) {}

  getTargetLink(target: string): string {
    const mid = this.route.snapshot.paramMap.get('mid');
    return mid ? `/${mid}/${target}` : `/${target}`;
  }
}

模板中绑定动态生成的链接：

<a [routerLink]="getTargetLink('test2')">

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