如何在新的Router V 3 alpha（vladivostok）中使用routerLink传递查询参数

Question

我想传递一个查询参数prop=xxx。

这不起作用

<a [routerLink]="['/somepath', {queryParams: {prop: 'xxx'}}]>Somewhere</a>

Answer 1

<强> queryParams

queryParams是routerLink的另一个输入，可以像

一样传递它们

<a [routerLink]="['../']" [queryParams]="{prop: 'xxx'}">Somewhere</a>

<强> fragment

<a [routerLink]="['../']" [queryParams]="{prop: 'xxx'}" [fragment]="yyy">Somewhere</a>

<强> routerLinkActiveOptions

还要在父路线上设置路线活动类：

[routerLinkActiveOptions]="{ exact: false }"

将查询参数传递给this.router.navigate(...)使用

let navigationExtras: NavigationExtras = {
  queryParams: { 'session_id': sessionId },
  fragment: 'anchor'
};

// Navigate to the login page with extras
this.router.navigate(['/login'], navigationExtras);

另见https://angular.io/guide/router#query-parameters-and-fragments

Answer 2

<a [routerLink]="['../']" [queryParams]="{name: 'ferret'}" [fragment]="nose">Ferret Nose</a>

foo://example.com:8042/over/there?name=ferret#nose
\_/   \______________/\_________/ \_________/ \__/
 |           |            |            |        |
scheme    authority      path        query   fragment

欲了解更多信息 - https://angular.io/guide/router#query-parameters-and-fragments

Answer 3

你也可以看看这个。

 <router-link
 
:to="{name:'router-name', params: { id:param1}, query:{link:query1}}"

>
 link name

 </router-link
>

Answer 4

这就是我所做的，效果很好。

http://yourdomain.com/user?id=121

<a [routerLink]="['/user']" [queryParams]="{id:'121' }">User Profile</a>