导航回父 URL

Question

我正在尝试在更改选项并且有更多路由参数时导航回父级 URL，如果没有路由参数，则保持当前 URL。

我举个例子让大家更清楚。

所以，我有 3 个组件：CompA、CompB 和 CompC，其中包含一个项目列表，当我导航到其中一项时，我保留在 URL:

/compA、/compB 或 /compC.

在每个组件内部导航到一个项目是可能的，并且也保存在 URL 中，如 /compA/item1.

我有一个 select 特定 客户端 的下拉菜单，我想要的是在客户端更改并且我有路由参数时导航回父级如果不这样做，则保留特定路线。

例如，我在 /compA/item2 上，我更换了客户端。预期的行为是导航到 /compA。或者，如果我在 /compB 上并且我更改了客户端，我应该保留在 /compB.

我找到了使用这个的解决方案

this.router.navigate(['.'], { relativeTo: this.activeRoute.parent });

但对我不起作用。

Answer 1

因为 . 是 "current directory"，../ 是 "one level up"

this.router.navigate(['../'], { relativeTo: this.activeRoute.parent });

Answer 2

我找到了一个解决方案：

const parentURL = this.router.url.split('/')[1];
this.router.navigate([parentURL]);

Navigate back to parent URL