Angular4路由问题：RouterLink自动添加%2F导致路由匹配失败

问题根源 #

你碰到的这个路由匹配错误，核心原因是在routerLink的数组参数里，给子路由路径多写了一个前缀斜杠/！

当使用数组形式的routerLink时，Angular会自动处理路由段之间的分隔符，完全不需要手动给子路由加开头的斜杠。你写的['/Questionaire',item.questionnaireType,item.id,'/UpdateQuestionnaire']中，'/UpdateQuestionnaire'的前置斜杠被Angular URL编码成了%2F，导致最终URL出现了无效的分段，自然匹配不到你定义的嵌套路由规则。

修复代码 #

只需要把/UpdateQuestionnaire前面的斜杠去掉，改成不带斜杠的'UpdateQuestionnaire'即可，修正后的代码如下：

<a class="primary small ui icon button" [routerLink]="['/Questionaire',item.questionnaireType,item.id,'UpdateQuestionnaire']" >
  <i class="edit icon"></i>
</a>

额外注意事项 #

再给你补充个RouterLink的使用小细节：用数组构建路由链接时，只有第一个路由段需要加斜杠（表示从根路由开始匹配），后续的所有路由分段都应该是不带斜杠的字符串，Angular会自动帮你拼接成正确的URL路径。比如你定义的嵌套路由Questionaire/:questionnaireType/:id下的子路由UpdateQuestionnaire，直接把它作为数组最后一个元素传入就好，不需要额外加斜杠。

修改后点击链接，就能正常跳转到你期望的地址.../Questionaire/1/b8b55b42-f39f-4359-93d0-0260ddf3827f/UpdateQuestionnaire，路由匹配也能正常工作了。

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