具有相同URL的Angular组件
我有一个要求，我需要使用两个组件相同的网址。
让我们假设路径是/path，组件是Foo和Bar。
最初，我将看到Foo组件，按下链接后，我将重定向到Bar组件。
/path (Foo) => /path (Bar)现在我看到了Bar组件，如果我在浏览器中按back按钮，我需要被重定向到Foo组件
/path (Bar) =>back button=>/path (Foo)另外，如果我按下"forward“按钮，我需要看到Bar组件
/path (Foo) =>forward button=> /path (Bar)因此，基本上，我需要拥有相同的URL，但以某种方式保留了Angular路由器提供的所有功能，就像有两条不同的路径一样。
这个是可能的吗？我已经研究了NavigationExtras选项，如skipLocationChange或replaceUrl，但这些选项对我没有帮助。history、pushState或replaceState也是如此(或者我可能不知道如何使用它们)。
回答 1
Stack Overflow用户
发布于 2020-05-13 05:23:16
听起来您最好有一个带有一个URL路径的父组件，其中包含组件foo和bar，并根据url中的查询参数有条件地显示其中一个或另一个。例如：
toggleFooBar(){
this.showFoo = !this.showFoo;
this.router.navigate([],
{
relativeTo: this.activatedRoute,
queryParams: {showFoo : this.showFoo}
}
);
}更多关于url params here的信息。
如果您订阅了父组件中位置的更改(并相应地显示/隐藏foo或bar )，则前进和后退按钮应按要求工作：
ngOnInit() {
this.location.subscribe(queryParams => {
// Don't forget to unsubscribe on destroy
this.showFoo = (this.activatedRoute.snapshot.queryParams.showFoo !== 'true')
});
}使用代码here的实时示例，但使用此代码来查看forward / back buttons in action。
我认为如果不对URL进行一些更改，您将无法使用前进/后退按钮，因为必须更改URL才能使浏览器历史记录中存在可供后退或前进的条目。
也许可以接近一些严肃的代码体操……也许您可以使用查询参数，然后再去掉它们？但即便如此，我认为您仍有可能导致浏览器/历史以意想不到的方式运行，这对您的应用程序可能弊大于利。
https://stackoverflow.com/questions/61762082
复制相似问题
腾讯云开发者
