Angular 6路由配置：如何匹配可变数量的URL分段

要实现匹配可变数量URL分段的路由，Angular路由系统提供了两种实用的方案，我来一步步帮你搞定：

方案1：使用**通配符匹配任意数量分段 #

这个方案可以匹配repo/之后零个或多个路径分段（比如repo、repo/xxx、repo/xxx/yyy/zzz都能命中）。只需要修改你的路由配置，把原来的repo/:name替换成repo/**：

const routes: Routes = [
  { path: '', redirectTo: '/catalog', pathMatch: 'full' },
  { path: 'login', component: LoginFormComponent },
  { path: 'catalog', component: CatalogComponent, canActivate: [SessionGuard] },
  // 替换后的路由，匹配repo开头的任意路径
  { path: 'repo/**', component: RepositoryComponent, canActivate: [SessionGuard] }
];

然后在RepositoryComponent中，你可以通过ActivatedRoute获取所有后续的路径分段：

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

@Component({
  selector: 'app-repository',
  templateUrl: './repository.component.html',
  styleUrls: ['./repository.component.css']
})
export class RepositoryComponent implements OnInit {
  pathSegments: string[] = [];

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    // 订阅路由变化，支持动态导航后的分段更新
    this.route.url.subscribe((urlSegments: UrlSegment[]) => {
      // 去掉第一个分段（也就是'repo'），获取后续的所有分段
      this.pathSegments = urlSegments.slice(1).map(segment => segment.path);
      console.log('当前路径分段:', this.pathSegments);
      // 在这里添加你的业务逻辑，比如根据分段加载对应资源
    });
  }
}

方案2：使用:param+匹配至少一个分段 #

如果你希望路由必须包含至少一个后续分段（比如只匹配repo/xxx、repo/xxx/yyy，不匹配repo本身），可以用:segments+的写法：

const routes: Routes = [
  // ...其他路由保持不变
  { path: 'repo/:segments+', component: RepositoryComponent, canActivate: [SessionGuard] }
];

这种情况下，所有后续分段会被拼接成一个用/分隔的字符串，存在segments参数里，在组件中可以这样获取：

ngOnInit(): void {
  this.route.paramMap.subscribe(params => {
    const segmentsStr = params.get('segments');
    if (segmentsStr) {
      this.pathSegments = segmentsStr.split('/');
      console.log('当前路径分段:', this.pathSegments);
    }
  });
}

注意事项 #

• 路由顺序很重要：**是通配符路由，一定要放在路由配置的最后面，避免覆盖其他具体路由（你的配置里repo路由在login、catalog之后，这个顺序是对的）。
• 动态路由处理：如果用户在同一个组件内导航不同的分段路径（比如从repo/a到repo/a/b），一定要订阅url或paramMap的变化，而不是只在ngOnInit中获取一次，这样才能实时更新分段数据。

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