Angular Router如何匹配包含cars-for-sale等特定子串的URL路径？

完全可以不添加路径前缀实现需求，核心是使用框架提供的自定义路由匹配能力，代替默认的静态路径匹配规则，以下是主流前端框架的实现方式：

1 配置顺序调整前提 #

不管用哪种方案，都需要先把/contact这类固定路径的路由放在配置列表的最前面，路由匹配是从上到下按顺序执行的，固定路径优先匹配不会被后面的规则拦截。

2 Angular 实现方式 #

Angular 提供了matcher配置项支持自定义路径匹配逻辑：

第一步：定义匹配函数 #

import { UrlMatchResult, UrlSegment, Routes } from '@angular/router';

// 匹配所有包含cars-for-sale的路径
function carSaleMatcher(urlSegments: UrlSegment[]): UrlMatchResult | null {
  const fullPath = urlSegments.map(seg => seg.path).join('-');
  return fullPath.includes('cars-for-sale') ? { consumed: urlSegments } : null;
}

// 匹配所有包含boats-for-sale的路径
function boatSaleMatcher(urlSegments: UrlSegment[]): UrlMatchResult | null {
  const fullPath = urlSegments.map(seg => seg.path).join('-');
  return fullPath.includes('boats-for-sale') ? { consumed: urlSegments } : null;
}

第二步：更新路由配置 #

const routes: Routes = [
  // 固定路径优先
  { path: 'contact', component: ContactComponent },
  // 自定义匹配规则
  { matcher: carSaleMatcher, component: CarSaleComponent },
  { matcher: boatSaleMatcher, component: BoatSaleComponent },
  // 可选：404路由放最后
  { path: '**', component: NotFoundComponent }
];

3 Vue Router 实现方式 #

Vue Router 支持给动态参数绑定正则校验规则：

const routes = [
  // 固定路径优先
  { path: 'contact', component: ContactComponent },
  // 正则要求参数值必须包含对应子串，.*代表任意长度任意字符
  { path: ':path(.*cars-for-sale.*)', component: CarSaleComponent },
  { path: ':path(.*boats-for-sale.*)', component: BoatSaleComponent }
]

拓展说明 #

如果需要从路径中提取车辆类型、省份这类参数，可以在匹配函数中解析路径后，通过返回值的params字段传递给组件，不需要组件自己再二次解析URL。

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