子路由上的页面重新加载

Using Angular 2 路由器 https://angular.io/docs/ts/latest/guide/router.html。我有一个 2 级路由（root routing and child routing]

我的问题是，当导航到孩子时route加载子项后，页面将重新加载。

子级路由

const childRoutes: Routes = [
   {
    path: '',
    component: BaseComponent,
    children: [
           {
            path: '',
            component: DetailsComponent
           },
           {
               path: 'other',
               component: OtherComponent
           }
       ]
   }
];

export const childRouting = RouterModule.forChild(childRoutes);

顶级路由

const appRoutes: Routes = [
    {
        path: '',
        redirectTo: '/overview',
        pathMatch: 'full'},
    {
        path: 'overview',
        component: OverviewComponent},
    {
        path: 'sub',
        //This is the module which the childRoutes belongs to.
        loadChildren: 'app/components/sub.module#SubModule'
    }
];

export const appRoutingProviders: any[] = [];

export const routing = RouterModule.forRoot(appRoutes);

从 DetailsComponent 调用导航

export class DetailsComponent implements OnInit {
    constructor(private router: Router) { }

    ngOnInit() { }

    onSubmit() {
        this.router.navigate(['/sub/other'])
    }
}

p.s

我试图保持这个问题简短，所以如果需要更多代码，请告诉我，我很乐意添加它。

这是由默认浏览器提交行为引起的。要么打电话preventDefault()， 返回false在事件处理程序中或添加type="button"防止提交事件默认行为。