Angular4路由配置：如何在路径中为动态参数拼接固定字符串

主流前后端路由库（Vue Router、React Router v6、Express/Koa Router等）原生支持同一路径段内「固定前缀+动态参数」的定义方式，不需要硬编码所有城市路由，直接按如下格式写路由规则即可：

/home/display-:cityname/

该规则会自动匹配/home/路径下以display-开头的单段路径，自动将display-后的内容解析为cityname参数。

配置优化 #

如果需要避免规则误匹配其他不符合格式的路径，可以给动态参数追加正则约束，限定城市名的合法格式（不同路由库的正则写法基本一致）：

// 限定cityname仅由字母、数字、中划线组成
/home/display-:cityname([a-zA-Z0-9-]+)/

加约束后，只有/home/display-beijing/、/home/display-new-york/这类符合格式的路径会命中当前路由，/home/other-entry/这类前缀不匹配的路径不会被错误拦截。

老版本路由库兜底方案 #

如果你使用的路由库版本较老，不支持同一路径段内拼接固定前缀和动态参数，可以用通配符+前置解析的方案实现：

• 第一步：定义通配路由捕获对应层级的路径

  /home/:pathSegment/
  

• 第二步：在路由解析回调/前置守卫里判断pathSegment的格式
  • 若字符串以display-开头，截取前缀后的内容作为cityname参数，正常加载城市页面
  • 若不符合前缀规则，直接放行给后续路由匹配，或返回404状态即可

注意：不要将固定前缀和动态参数拆分为两个路径段（比如写为/home/display/:cityname），该写法生成的路径会多一层斜杠，和你需要的/home/display-{cityname}单段路径格式不一致。

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