Angular中使用Router.navigate的relativeTo参数跳转'../'失败

Question

在使用this.router.navigate(['../'], { relativeTo: this.route })进行路由跳转时，V1Component、V2Component都无法通过'../'、'../../'等方式回到上一级页面，而V3Component却可以，这是为什么呢?

文件目录

路由

const routes: Routes = [
  { path: '', redirectTo: 'page', pathMatch: 'full' },
  {
    path: 'page',
    children: [
      { path: '', component: PageComponent },
      {
        path: 'v1',
        children: [
          { path: '', component: V1Component },
          {
            path: 'v2',
            children: [
              { path: '', component: V2Component },
              { path: 'v3', component: V3Component }
            ]
          }
        ]
      },
    ]
  }
];

v1

<p>我是v1</p>
<p><a href="javascript:void(0);" (click)="goV2()">进入v2</a></p>
<p><a href="javascript:void(0);" (click)="goV3()">进入v3</a></p>
<p><a href="javascript:void(0);" (click)="backPage()">回到page</a></p>

  goV2() {
    this.router.navigate(['v2'], { relativeTo: this.route });
  }
  goV3() {
    this.router.navigate(['v2/v3'], { relativeTo: this.route });
  }
  backPage() {
    this.router.navigate(['../'], { relativeTo: this.route });//没反应
  }

v2

<p>我是v2</p>
<p><a href="javascript:void(0);" (click)="goV3()">进入v3</a></p>
<p><a href="javascript:void(0);" (click)="backV1()">回到v1</a></p>
<p><a href="javascript:void(0);" (click)="backPage()">回到page</a></p>

  goV3() {
    this.router.navigate(['v3'], { relativeTo: this.route });
  }
  backV1() {
    this.router.navigate(['../'], { relativeTo: this.route });//没反应
  }
  backPage() {
    this.router.navigate(['../../'], { relativeTo: this.route });//没反应
  }

v3

<p>我是v3</p>
<p><a href="javascript:void(0);" (click)="backV2()">回到v2</a></p>
<p><a href="javascript:void(0);" (click)="backV1()">回到v1</a></p>
<p><a href="javascript:void(0);" (click)="backPage()">回到page</a></p>

  backV2() {
    this.router.navigate(['../'], { relativeTo: this.route });//可以回到v2
  }
  backV1() {
    this.router.navigate(['../../'], { relativeTo: this.route });//可以回到v1
  }
  backPage() {
    this.router.navigate(['../../../'], { relativeTo: this.route });//可以回到page
  }

page

<p>我是page</p>
<p><a href="javascript:void(0);" (click)="goV1()"> 进入v1</a></p>
<p><a href="javascript:void(0);" (click)="goV2()">进入v2</a></p>
<p><a href="javascript:void(0);" (click)="goV3()">进入v3</a></p>

constructor(private router: Router, private route: ActivatedRoute) { }
  goV1() {
    this.router.navigate(['v1'], { relativeTo: this.route });
  }
  goV2() {
    this.router.navigate(['v1/v2'], { relativeTo: this.route });
  }
  goV3() {
    this.router.navigate(['v1/v2/v3'], { relativeTo: this.route });
  }