从另一个组件调用时，Angular 6 相同的 router.navigate 会导致刷新

Question

我有一个路由模块如下:

应用路由模块

const routes: Routes = [
  {
    path: '',
    redirectTo: environment.devRedirect,
    pathMatch: 'full',
    canActivate: [AuthenticationGuard]
  },
  {
    path: 'customers/:customerId/contracts/:contractId',
    loadChildren: './grouping/grouping-routing.module#GroupingRoutingModule'
    canActivate: [AuthenticationGuard],
  }
];

还有一个带有路由的子组件:

const routes: Routes = [
      {
        path: 'create',
        component: CreateEditComponent,
        data: { animation: 'create' },
        canActivate: [ AuthenticationGuard ]
      },
      {
        path: ':groupId/edit',
        component: CreateEditComponent,
        data: { animation: 'edit' },
        canActivate: [ AuthenticationGuard ]
      },
      {
        path: '',
        component: OverviewComponent,
        data: { animation: 'overview' },
        canActivate: [ AuthenticationGuard ]
      }
];

我有一个位于 app.component.html 中的顶级导航栏组件。

导航栏组件和 CreateEditComponent 都有一个如下所示的函数。两者都是使用带有(单击)的按钮调用的:

  goToOverview(): void {
    this._router.navigate(['customers/:customerId/contracts/:contractId']);
  }

当我调试路由器对象时，两者看起来完全一样，即具有所有相同的路径等。

我的问题是导航栏功能路由正确，但 CreateEditComponent 导航，附加一个 ?然后重新加载页面。我在这里遗漏了什么，为什么当 activatedRoute 对象相同时，两个看似相似的调用会产生如此不同的结果？

Answer 1

终于弄清楚是什么导致了刷新。带有 (click) 的按钮导致刷新的处理程序位于 <form> 中标签。每当调用 router.navigate 的点击函数时，它都会导致表单提交，这似乎是原因