更改路由器URL而不进行导航，但添加到浏览器历史记录中

Question

我有一个搜索页面，用户可以在其中执行搜索并查看结果。

最初，我的问题是在不导航的情况下更新路由器URL，但我通过使用"；位置"；。

我的ngOnInit-我的搜索页面可以被另一个页面导航到，所以如果发生任何情况，我会监听queryParams来执行搜索：

ngOnInit() {    
this.queryParamsSubscription = this.activatedRoute.queryParams.subscribe(queryParams => {
this.searchText = queryParams[TD_QUERY_PARAMS.text];
if (this.searchText) {
this.search();
}
});
}

我的搜索方法：

search() {    
const queryParams: Params = { text: this.searchText };
const desiredUrl = this.router.createUrlTree([], {
queryParams: queryParams,
relativeTo: this.activatedRoute,
skipLocationChange: true
});
this.location.replaceState(desiredUrl.toString());
}

这个实现确保了当用户在搜索页面中搜索时，我会更新URL，这是我的解决方案的第一部分。

然而，我也想将任何搜索添加到浏览器历史记录中，即：

• 我首先在"localhost:4200/landing"上启动我的应用程序。

• 在这个页面上，我有一个搜索栏，当它被触发时，将导航到我的搜索页面。

• 在登录页中，我搜索"1"。然后路由器导航到：'localhost:4200/search？text=1'

• 然后在搜索页面上，我搜索"2"。执行搜索，URL更新为：'localhost:4200/search？text=2'

• 最后我搜索了"3"："本地主机：4200/搜索？text=3'。

当我按下浏览器的"后退"按钮时，我会被导航到"本地主机：4200/search？text=2'。

但是，我在页面中进行的任何搜索都没有添加到历史记录中，因此我将被导航到搜索页面之前访问的任何页面。在我的例子中，"localhost:4200/landing"。

如何将这些搜索添加到浏览器历史记录中？

Answer 1

我相信其中一个就是您所需要的：

1. this.router.navigate(['/yourRouteGoesHere'], { replaceUrl: true });

2. 您可以使用的其他选项是：SkipLocationChangethis.router.navigateByUrl(['yourFullPath'], { skipLocationChange: true });

3. 使用CCD_ 3。

这样您就可以导航，而无需将此路线添加到历史记录中。

Answer 2

这是一个过度思考我所面临问题的案例。

仅使用router.navigate(['/search'], { queryParams: queryPrams })

我得到了我想要的结果。URL被更改，一个点被添加到浏览器历史记录中。

我没有意识到的是，当只有queryParams被更改时，router.navigation不会重新加载整个页面。

希望这能帮助任何在同一问题上挣扎的人。