Angular父路由默认跳转子路由的条件控制实现问询

安全阿岳

2026-6-20

实现条件路由逻辑的修改方案

步骤1：修改主导航栏的"Two"点击逻辑

不再直接给主导航的"Two"链接绑定routerLink，而是通过点击事件判断当前路由状态，决定是否跳转：

主导航组件的TS代码

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

@Component({
  selector: 'app-main-nav',
  templateUrl: './main-nav.component.html',
  styleUrls: ['./main-nav.component.css']
})
export class MainNavComponent {
  constructor(private router: Router) {}

  handleTwoNavClick(): void {
    // 检查当前路由是否属于/two的子路由
    const currentRouteIsTwoChild = this.router.url.startsWith('/two/');
    if (!currentRouteIsTwoChild) {
      this.router.navigate(['/two/ay']);
    }
    // 已处于Two子路由时，不执行任何跳转操作
  }
}

主导航组件的模板代码

将原来绑定routerLink的"Two"链接替换为点击事件绑定：

<!-- 主导航栏中的Two选项 -->
<a class="nav-link" (click)="handleTwoNavClick()">Two</a>

步骤2：优化路由配置（可选但推荐）

给/two路径添加默认重定向，确保用户直接访问/two时自动跳转到第一个子路由/two/ay，避免嵌套router-outlet为空的情况：

export const routeConfig: Routes = [
  { path: '', pathMatch: 'full', component: OneComponent },
  {
    path: 'two',
    component: TwoComponent,
    children: [
      { path: '', pathMatch: 'full', redirectTo: 'ay' }, // 添加默认重定向规则
      { path: 'ay', component: TwoAyComponent },
      { path: 'bee', component: TwoBeeComponent },
      { path: 'cee', component: TwoCeeComponent },
      { path: 'dee', component: TwoDeeComponent },
    ],
  },
  { path: 'three', pathMatch: 'full', component: ThreeComponent },
  { path: '**', component: NotFoundComponent },
];