Angular同层级路由如何根据查询参数加载不同根组件？

原路由配置存在问题：Angular路由会优先匹配第一个符合路径的条目，所以两个空路径的配置只会加载HomeComponent，无法区分是否带查询参数。以下是两种可行的实现方式：

方案一：路由守卫+重定向（URL会变更） #

这种方式通过守卫判断查询参数，自动重定向到对应子路由，适合需要明确路由标识的场景。

1. 调整路由配置，拆分出home和search子路由，根路径通过守卫控制：

const routes: Routes = [
  {
    path: '',
    canActivate: [RootRouteGuard],
    children: [
      { path: 'home', component: HomeComponent },
      { path: 'search', component: SearchComponent },
    ]
  },
  // 可选：兜底路由，处理无效路径
  { path: '**', redirectTo: '' }
];

2. 创建路由守卫RootRouteGuard，实现参数判断与重定向逻辑：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, Router } from '@angular/router';

@Injectable({ providedIn: 'root' })
export class RootRouteGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot): boolean {
    // 检查是否存在查询参数
    const hasQueryParams = Object.keys(route.queryParams).length > 0;
    
    if (hasQueryParams) {
      // 带参数时跳转到search路由，保留原查询参数
      this.router.navigate(['/search'], { queryParams: route.queryParams });
    } else {
      // 无参数时跳转到home路由
      this.router.navigate(['/home']);
    }
    return false; // 阻止原根路由激活，因为已完成重定向
  }
}

方案二：占位组件动态渲染（URL保持根路径） #

如果需要保持根路径URL不变，可通过一个占位组件根据查询参数动态切换渲染目标组件。

1. 创建RootPlaceholderComponent作为根路由的占位组件：

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

@Component({
  template: `
    <app-home *ngIf="!hasQueryParams"></app-home>
    <app-search *ngIf="hasQueryParams"></app-search>
  `
})
export class RootPlaceholderComponent implements OnInit {
  hasQueryParams = false;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // 初始化时判断查询参数
    this.hasQueryParams = Object.keys(this.route.snapshot.queryParams).length > 0;
    
    // 监听查询参数动态变化，支持参数修改后自动切换组件
    this.route.queryParams.subscribe(params => {
      this.hasQueryParams = Object.keys(params).length > 0;
    });
  }
}

2. 修改路由配置，将根路径指向占位组件：

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

注意事项 #

• 方案一的URL会变为/home或/search，方案二始终保持根路径/。
• 若需支持查询参数动态修改后切换组件，方案二中的queryParams订阅逻辑不可省略。

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