Angular路由：同一路径不同查询参数如何匹配不同组件？

你当前的路由配置无效，核心原因是配置了两个完全相同的path: 'instructors'路由。Angular的路由匹配机制是按数组顺序从上到下匹配，第一个匹配到的路由会被优先加载，因此第二个InstructorComponent永远不会被触发。

下面提供两种符合需求的解决方案：

方案1：使用路径参数（推荐） #

这种方式更符合RESTful设计风格，路径结构清晰直观，也是Angular路由的最佳实践。

1. 修改路由配置
   将详情页路由改为带路径参数的形式：

const routes: Routes = [
    { path: 'instructors', component: InstructorlistComponent },
    { path: 'instructors/:id', component: InstructorComponent }
];

其中/:id是动态路径参数，用于匹配/instructors/123这类带ID的路径。

2. 更新跳转链接
   把原有的查询参数跳转改为路径参数跳转：

<a [routerLink]="['/instructors', instructor.id]">{{ instructor.name }}</a>

3. 在详情组件中获取ID
   通过ActivatedRoute获取路径参数：

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

constructor(private route: ActivatedRoute) {}

ngOnInit(): void {
    const instructorId = this.route.snapshot.paramMap.get('id');
    // 根据ID请求讲师详情数据
}

方案2：保留查询参数，调整路由逻辑 #

如果坚持要使用/instructors?id=xxx的形式，需要避免重复路由，可通过以下方式实现：

方式A：在同一组件内切换显示 #

只保留一个路由配置，在列表组件中根据查询参数判断显示列表还是详情：

const routes: Routes = [
    { path: 'instructors', component: InstructorlistComponent }
];

在InstructorlistComponent中监听查询参数变化：

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

private queryParamSubscription: Subscription;

constructor(private route: ActivatedRoute) {}

ngOnInit(): void {
    this.queryParamSubscription = this.route.queryParams.subscribe(params => {
        const instructorId = params['id'];
        if (instructorId) {
            // 加载并渲染讲师详情
        } else {
            // 渲染讲师列表
        }
    });
}

ngOnDestroy(): void {
    this.queryParamSubscription.unsubscribe();
}

方式B：使用路由守卫动态切换组件（进阶） #

通过路由守卫判断查询参数，动态决定加载哪个组件，适合大型项目的复杂场景，但实现相对繁琐，这里不再展开细节。

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