Angular面包屑导航Home页面重复显示问题求助

你的问题核心是默认路由指向/home，面包屑生成逻辑中同时解析了根路径（空路径）和/home路由的面包屑配置，导致数组里多了一个Home条目，最终重复显示。

以下是几种可行的解决思路：

• 调整路由配置，移除冗余重定向
  如果原本根路径是通过重定向指向/home，可以直接将Home组件设为根路径的组件，避免额外的路由跳转生成多余面包屑：

  const routes: Routes = [
    { path: '', component: HomeComponent, data: { breadcrumb: 'Home' } },
    // 其他路由配置...
  ];
  

• 在面包屑服务中过滤重复条目
  若必须保留重定向逻辑，就在生成面包屑数组时检查并去重。比如在breadcrumb.service.ts的面包屑生成方法中添加过滤：

  getBreadcrumbs(): Observable<Breadcrumb[]> {
    return this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      map(() => {
        let breadcrumbs = this.buildBreadcrumbs(this.router.routerState.root);
        // 过滤重复的Home面包屑
        const homeEntries = breadcrumbs.filter(crumb => crumb.label === 'Home');
        if (homeEntries.length > 1) {
          // 保留第一个Home条目，移除后续重复项
          breadcrumbs = breadcrumbs.filter((crumb, index) => 
            crumb.label !== 'Home' || index === breadcrumbs.findIndex(c => c.label === 'Home')
          );
        }
        return breadcrumbs;
      })
    );
  }
  

• 清理路由数据中的重复面包屑配置
  检查路由配置，确保只有根路由或/home路由中的某一个配置了breadcrumb: 'Home'，不要同时给两个路由加这个配置：

  // 错误示例：两个路由都配置了Home面包屑
  { path: '', redirectTo: '/home', pathMatch: 'full', data: { breadcrumb: 'Home' } },
  { path: 'home', component: HomeComponent, data: { breadcrumb: 'Home' } }
  
  // 正确示例：仅在/home路由配置面包屑
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent, data: { breadcrumb: 'Home' } }
  

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