Angular Router通配符失效问题：多级路由无法重定向至首页

你遇到的核心问题是路由匹配优先级导致的——当访问/company/dafsdf时，Angular会优先匹配company/:name这条规则，而不是触发全局通配符路由。这是因为:name作为路由参数，可以匹配任意非空字符串（哪怕这个name对应的资源不存在），路由系统会默认这是一个有效路由，进而尝试加载CompanyComponent。如果你的组件里有根据name请求数据的逻辑，请求不存在的资源时就会出现控制台404，但路由本身不会触发重定向。

下面给你两种针对性的解决方案，你可以根据需求选择：

方案一：给company添加子路由通配符 #

通过给company路径配置子路由，专门拦截其下的无效子路径，直接在路由层面处理重定向：

const routes: Routes = [
  { path: '', component: HomeComponent },
  { 
    path: 'company', 
    children: [
      { path: ':name', component: CompanyComponent },
      // 匹配company下所有未被上面规则覆盖的路径，重定向到首页
      { path: '**', redirectTo: '/' }
    ]
  },
  // 匹配所有其他一级无效路径，重定向到首页
  { path: '**', redirectTo: '/' }
];

这个方案无需修改组件逻辑，属于路由层面的统一拦截处理。

方案二：在CompanyComponent内判断资源合法性 #

如果你希望区分“路径格式正确但资源不存在”和“完全无效的路径”，可以在组件内对参数对应的资源做校验：

import { ActivatedRoute, Router } from '@angular/router';
import { CompanyService } from './your-company-service-path';

constructor(
  private route: ActivatedRoute,
  private router: Router,
  private companyService: CompanyService
) {}

ngOnInit() {
  const companyName = this.route.snapshot.paramMap.get('name');
  
  this.companyService.getCompany(companyName).subscribe({
    next: (company) => {
      // 公司存在，正常渲染组件内容
    },
    error: (err) => {
      // 若返回404，说明公司不存在，重定向到首页
      if (err.status === 404) {
        this.router.navigate(['/']);
      }
    }
  });
}

这个方案更灵活，能精准处理“合法路径但无效资源”的场景。

最后再提醒一句：Angular路由是按数组顺序从上到下匹配的，一定要确保全局通配符**放在路由数组的最末尾，否则会覆盖其他正常路由规则。

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