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>。每当调用 click 函数时，router.navigate 都会导致表单提交，这似乎是原因