使用新路由器v3 Angular2清除所有查询参数

Question

我试图弄清楚如何使用Angular2路由器导航（路由器3.0.0-alpha.7）和查询参数。

this._router.navigate(['/login'], {queryParams: {redirect: 'route1'}});

在“/login”组件中，我进行了一些登录，这将重定向到< code>redirect路由，即这里的route1。然而，在重定向之后，< code>redirect查询参数保留在URL中，即我现在位于页面< code>/route1？redirect=route1。我想删除这里的重定向参数。

此外，如果我随后使用相同的重定向查询参数导航到另一个页面，它不会覆盖前一个页面，而是在URL中添加另一个？redirect=...。即：

this._router.navigate(['/another-route'], {queryParams: {redirect:'route2'}});

引导我到＜代码＞/另一条路线？重定向=路由2？重定向=路由1

Answer 1

您可以简单地使用 preserveQueryParams： false 参数来忽略查询参数

this.router.navigate(['target'], {preserveQueryParams: false});

Answer 2

实际上…您不应该“期望路由器清除查询参数”。

显然，你确实期望如此。但那是因为您不知道一个重要的路由器设计决策...可能是因为，不幸的是，我们还没有在文档中告诉您。我们现在正在努力纠正这一点。

QueryParams用于跨导航的全局参数；他们不会改变。

MatrixParams用于属于当前导航的参数；这些确实改变了。

什么属于全局< code>QueryParams？来自服务器的东西是候选者。就像属于每个交互的身份验证令牌。

但是必需的路由参数（customer/：id 中的 ：id）和可选的矩阵参数（如 /customers;name=Jo* 中的 ;name=Jo*）是一个导航的本地参数。这就是使用可选名称筛选器为客户指定导航的方式。

我建议调整你的期望，而不是与之抗争。

Answer 3

我对此也很纠结。当导航到另一条路由时，您会期望路由器默认清除查询参数...

你可以做任何一件事

this._router.navigate(['/route1'], {queryParams: {}});

或

this._router.navigateByUrl('/route1');

<a [routerLink]="['/applications']" [queryParams]="{}"> Applications</a>