Angular路由无法匹配问题排查及标准路由方案咨询

我一眼就看出问题出在你路由配置里的末尾斜杠上——就是那些父路由路径最后加的/，比如:rootFolder/和:rootFolder/:currentFolder/，这完全打乱了Angular Router的默认匹配逻辑。

背后的原因得从Angular的路由匹配规则说起： #

• Angular Router是按URL段（用斜杠分隔的部分）来匹配路由的。当你在父路由路径末尾加/，相当于要求URL必须多一个空的段（比如/myRoot/而不是/myRoot），但Angular默认会自动规范化URL：移除末尾斜杠、合并重复斜杠等。这就导致浏览器里的实际URL已经被处理成不带末尾斜杠的版本，自然匹配不上你带斜杠的父路由，子路由也就无从触发了。
• 你加的那些调试路由（name/*、name）其实没必要，因为name/**已经能匹配name开头的任意层级路径，但前提是父路由先匹配成功。而UrlMatcher能工作，是因为它是自定义逻辑，你可以手动忽略末尾斜杠的差异，但内置路由匹配是严格遵循路径段规则的。

解决办法很简单，两步就能搞定： #

1. 移除所有父路由路径的末尾斜杠，把:rootFolder/改成:rootFolder，:rootFolder/:currentFolder/改成:rootFolder/:currentFolder。
2. 清理冗余的调试路由，保留最合理的规则即可。

修改后的配置如下：

{ 
  path: ':rootFolder', 
  children: [
    { path: 'name/**', component: MainComponent },
    { path: '', component: MainComponent, pathMatch: 'full' },
  ], 
},
{ 
  path: ':rootFolder/:currentFolder', 
  children: [
    { path: 'name/**', component: MainComponent },
    { path: '', component: MainComponent, pathMatch: 'full' },
  ], 
},

额外补充： #

如果你非要保留末尾斜杠的URL，可以通过配置UrlSerializer来禁用Angular的URL规范化，但这会打破默认的行为规范，不推荐这么做。最好还是遵循Angular的设计，让路由路径不带末尾斜杠，它会自动处理各种URL格式的兼容。

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