angular - 使用 routerLink 返回

Question

我正在使用 routerLink 返回我的页面。

当前路线可以有 3 个级别：

myurl.com/parent
myurl.com/parent/child
myurl.com/parent/child/grandchild

另外，我有一些不同的组件，所以它不会总是父母，它可以是 parent1 或 parent2，也适用于子孙，例如：

myurl.com/parent2/child1/grandchild2

我想要的是总是去上一个级别，例如：

myurl.com/parent/child/grandchild -> myurl.com/parent/grandchild

我所做的是：

<button [routerLink]="['../'']">
       back
</button>

但它总是导航到“myurl.com”

我该如何解决？

正如一些用户所建议的，我正在分享我的路由配置：

在 app.routing.ts 中：

const APP_ROUTES: Routes = [
{
  path: '',
  canActivate: [LoggedInGuard],
  children: [
    {path: '', redirectTo: '/mainPage', pathMatch: 'full'},
    {path: 'parent', loadChildren: 'app/parent/parend.module#ParentModule'
]},
{path: '**', redirectTo: ''}
];

在 parent.routing.ts 中：

const PARENT_ROUTES: Routes = [
 {path: '', component: ParentComponent},
 {path: ':id', component: ChildComponent},
];

如果在浏览器中我写道：

myurl.com/parent -> it works

但是单击后退按钮失败

Answer 1

如果您试图“向上”导航一级，那么您几乎是正确的。

<a routerLink="..">Up</a>

这将导航

myurl.com/parent/child/grandchild -> myurl.com/parent/child

---

但是，如果您想真正像浏览器的后退按钮一样导航“后退”，则需要使用 javascript。

在这个 StackOverflow 问题上，该问题有多种现有答案

---

对于更复杂的事情，这将取决于您要执行的操作 - 但它可能需要点击处理程序和对 URL 的一些手动操作。

Answer 2

试试这个[routerLink]="['../child']"

Answer 3

当它是一个延迟加载的模块时会特别观察到这一点，并且它是 一个已知的错误。

Angular 11：开箱即用，效果很好。

@NgModule({
  imports: [RouterModule.forRoot(routes, {})], // relativeLinkResolution === 'corrected' by default
  exports: [RouterModule],
})
export class AppRoutingModule {}

在 Angular 11 之前：{relativeLinkResolution: 'corrected'}明确使用。

@NgModule({
  imports: [RouterModule.forRoot(routes, {relativeLinkResolution:'corrected'})],
  exports: [RouterModule],
})
export class AppRoutingModule {}

您还可以设置{relativeLinkResolution:'legacy'}以获取您面临的当前行为。