如何匹配带Slug参数的URL路径与具体路由？

针对你的需求——验证路径模板/blog/:slug1/:slug2与具体路由/blog/foo/bar是否匹配，同时提取动态参数，以下是几种实用实现方式：

1. 手动解析路径片段 #

通过分割路径字符串，逐个对比片段的方式实现匹配，逻辑直观易懂：

function matchRoute(template, path) {
  // 分割路径并过滤空字符串（处理首尾/的情况）
  const templateSegments = template.split('/').filter(seg => seg);
  const pathSegments = path.split('/').filter(seg => seg);
  
  // 路径段长度不一致直接不匹配
  if (templateSegments.length !== pathSegments.length) return { matched: false };
  
  const params = {};
  for (let i = 0; i < templateSegments.length; i++) {
    const tempSeg = templateSegments[i];
    const pathSeg = pathSegments[i];
    
    if (tempSeg.startsWith(':')) {
      // 动态参数，提取参数名和对应值
      const paramName = tempSeg.slice(1);
      params[paramName] = pathSeg;
    } else if (tempSeg !== pathSeg) {
      // 固定片段不匹配，直接返回失败
      return { matched: false };
    }
  }
  
  return { matched: true, params };
}

// 测试调用
const matchResult = matchRoute('/blog/:slug1/:slug2', '/blog/foo/bar');
console.log(matchResult);
// 输出：{ matched: true, params: { slug1: 'foo', slug2: 'bar' } }

2. 正则表达式转换 #

将路径模板转换为正则表达式，利用正则的捕获组提取参数，适合复杂模板场景：

function matchRouteWithRegex(template, path) {
  // 将模板中的动态参数替换为正则捕获组，转义路径分隔符
  const regexPattern = '^' + 
    template.replace(/:[^/]+/g, '([^/]+)') // 把:slug替换成([^/]+)
            .replace(/\//g, '\\/') // 转义/为\/
    + '$';
  
  const routeRegex = new RegExp(regexPattern);
  const match = path.match(routeRegex);
  
  if (!match) return { matched: false };
  
  // 提取模板中的参数名
  const paramNames = template.match(/:([^/]+)/g)?.map(name => name.slice(1)) || [];
  const params = {};
  
  // 关联捕获组值与参数名
  paramNames.forEach((name, index) => {
    params[name] = match[index + 1];
  });
  
  return { matched: true, params };
}

// 测试调用
const regexMatchResult = matchRouteWithRegex('/blog/:slug1/:slug2', '/blog/foo/bar');
console.log(regexMatchResult);
// 输出：{ matched: true, params: { slug1: 'foo', slug2: 'bar' } }

3. 利用成熟路由库 #

如果是在Node.js或前端项目中，可以直接使用专门的路由匹配库（如path-to-regexp，Express等框架底层也依赖它），无需重复造轮子：

// 先安装依赖：npm install path-to-regexp
const { pathToRegexp } = require('path-to-regexp');

const template = '/blog/:slug1/:slug2';
const targetPath = '/blog/foo/bar';

const paramKeys = [];
// 生成匹配正则并收集参数键名
const regex = pathToRegexp(template, paramKeys);
const match = regex.exec(targetPath);

if (match) {
  const params = {};
  paramKeys.forEach((key, index) => {
    params[key.name] = match[index + 1];
  });
  console.log({ matched: true, params });
} else {
  console.log({ matched: false });
}

内容的提问来源于stack exchange，提问作者Ömer Faruk Demirel