Angular RouterLink

当应用于模板中的元素时，它会创建一个指向该元素的链接，该链接会在路由上启动导航。在导航页面上的一个或多个 <router-outlet> 位置打开一个或多个路由组件。

选择器

性质

描述

给定路由配置 [{path: 'user/:name', component: UserCmp }]，以下代码创建一个指向该路由的静态链接： <a routerLink="/users/bob">链接到用户组件</ a>

您可以使用动态值来生成链接。对于动态链接，请按顺序传递路径段，然后为每个段传递一个参数。例如，['/team', teamId, 'user', userName, {details: true}] 生成指向 /team/11/user/bob;details=true 的链接。

多个静态段可以合并为一个术语，并与动态段结合。例如，**['/team/11/user', userName, {details: true}]**

您提供给链接的输入被视为当前 URL 的增量。例如，假设当前 URL 是 **/user/(box//aux:team)。** 链接 <a [routerLink]="['/user/jim']">Jim</a> 创建 URL /user/(jim//aux:team)。有关更多信息，请参阅 createUrlTree。

您可以在链接中使用绝对或相对路径，设置查询参数，控制参数的处理方式，以及保留导航状态的历史记录。

相对链接路径

第一个段的名称可以附加 /、/、或 ../。

如果第一个段以 / 开头，路由器会从应用程序路由开始查找路由。

如果第一个段以 ./ 开头或不以斜杠开头，路由器会查找当前活动路由的子项。

如果第一个段以 ../ 开头，路由器会向上移动一级根树。

设置和处理查询参数及片段

以下链接向生成的 URL 添加了查询参数和片段

默认情况下，指令使用给定的查询参数构造新 URL。此示例生成链接

您可以通过在链接中指定 queryParamsHandling 选项来指示指令以不同的方式处理查询参数。允许的值为

'**merge**'：将给定的 queryParams 合并到当前 queryParams 中。

'**preserve**'：保留当前的 queryParams。

例如

保留导航历史

您可以提供一个 state 值来持久化到浏览器的 History.state 属性。例如

使用 Router#getCurrentNavigation 来检索已保存的 navigation-state 值。例如，在 NavigationStart 事件期间捕获 tracingId