Angular router跳转时路径拼接为相对路径的正确解决方案是什么？

问题原因 #

你当前使用的是相对路径写法的routerLink，Angular路由默认会将相对路径追加到当前激活的路由路径之后，因此会出现路径拼接的问题。

官方标准解决方案 #

直接将routerLink的属性值改为绝对路径，即在路径开头添加斜杠/，标识从应用根路由开始匹配路径，而非基于当前路径做拼接。
修改后的导航栏代码如下：

<a routerLink="/main_page">Main Page</a><br><br>
<a routerLink="/add_computer">Add Computer</a><br><br>
<a routerLink="/edit_computer">Edit Computer</a><br><br>
<a routerLink="/remove_computer">Remove Computer</a><br><br>

补充说明 #

• 如果你需要使用数组形式的routerLink写法（通常用于传递路由参数的场景），同样在第一个路径段前加斜杠即可：[routerLink]="['/add_computer']
• 只有当你需要在当前路由的子路由下做相对跳转时，才使用不带斜杠的相对路径写法，你当前的所有路由均为一级根路由，使用绝对路径完全匹配需求。

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