使用查询参数导航

我有一个问题路由到一个查询参数的路由，我有这样的功能

goToLink(link) {
this.router.navigate([`${link.split('?')[0]}`, { queryParams: this.sortParams(link)}]);
}

和这个函数

sortParams(link) {
let queryParams = url.split('?')[1];
let params = queryParams.split('&');
let pair = null;
let data = {};
params.forEach((d) => {
pair = d.split('=');
data[`${pair[0]}`] = pair[1];
});
return data;
}

所以基本上发生了什么，我有一个叫 goToLink()的函数，它接受一个 url，传递的 url 是一个带有查询参数的字符串，就像这样。.

https://website.com/page?id=37&username=jimmy

上面的例子并不是它实际上看起来的样子而是一个带有查询参数的链接字符串所以我从字符串中移除了参数并将它们存储在 sortParams()函数中的一个数据对象中所以当我传入上面的字符串时我得到了一个这样的对象

{id: 37, username: 'jimmy'}

这就是我要传递给路由器 queryParams:部分的内容导航,

返回对象时，函数应该如下所示

this.router.navigate([`${link.split('?')[0]}`, { queryParams: {id: 37, username: 'jimmy'}}]);

所以我成功地路由到所需的路由，但查询参数看起来像这样。

/page;queryParams=%5Bobject%20Object%5D

我做错什么了吗？

如果你能帮忙，我会很感激的！

剪辑

如果我把函数改成这样

 this.router.navigate([`${link.split('?')[0]}`, { queryParams: {id: 37, username: 'jimmy'}}]);

我得到相同的网址 /page;queryParams=%5Bobject%20Object%5D

112240 次浏览
小开
最佳答案

可以是，你已经放置了括号，这应该是第一个参数，但你已经封装了它在整个路线

你的代码:

// This is the end of your route statement:  '}}]);' which the close bracket is included
this.router.navigate([`${link.split('?')[0]}`, { queryParams: {id: 37, username: 'jimmy'}}]);

更新路线:

只将 ]关闭括号放在第一个参数中，尽量不要将它放在路由语句的最后部分。

// Update end line: '}});'
this.router.navigate([`${link.split('?')[0]}`], { queryParams: {id: 37, username: 'jimmy'}});

摘要:

this.router.navigate([ url ], { queryParams: { ... } })
小开

如果要导航到包含查询参数的 URL 字符串，请尝试使用 路由器导航 ByUrl。

例如:

this.router.navigateByUrl('/page?id=37&username=jimmy');

小开

试试这样:

this.router.navigate(['my-route', 37], { queryParams: { username: "jimmy"}});
小开 
this.router.navigateByUrl('/page?id=37&username=jimmy');

当参数是动态的时候这样做更好。


提交答案