Angular2 路由错误地重新加载主页

Question

获得了一个包含 2 个页面（主页和项目）的简单演示站点。当我通过菜单栏从主页单击到项目页面时，一切正常。但是当我从 link 上的主页单击 link 到项目页面时，项目页面会显示一秒钟，然后重新加载主页。任何人都知道什么可能是错的？如果我用一个按钮替换锚点，它也可以正常工作！所以我猜 href=""

有问题

路线：

const routes: Routes =[
  { path: 'home',             component: HomeComponent },
  { path: 'project',          component: ProjectsComponent },
  { path: '', redirectTo: 'home', pathMatch: 'full' }
];

@NgModule({
  imports: [
  ...,
  RouterModule.forRoot(routes, { useHash: true })
],
exports: [
],

})

导航栏（工作正常）：

<a [routerLink]="['/project']" class="nav-link">Project</a>

html（主页-恰好是一个组件）：

<a href="" (click)="showProject()">project</a>

（组件的）打字稿：

import { Router } from '@angular/router';

constructor(private router: Router) {
  ...
}

public showProject() {
  this.router.navigate(['/project']);
}

Answer 1

最重要的是，您需要删除 html 页面上的 href 属性：

HTML主播：

<a href="" (click)="showProject()">project</a>

必须在没有 href 属性的情况下使用。

<a (click)="showProject()">project</a>

否则，页面将完全重新加载。然后，一些关于路由配置的建议。将路线 constant 更改为：

const routes: Routes =[
  { path: 'home',             component: HomeComponent },
  { path: 'project',          component: ProjectsComponent },
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: '**', redirectTo: '' }
];

在组件中只需将 showProject 方法修改为：

public showProject() {
  this.router.navigate(['project']);
}

Answer 2

尝试空 [routerLink]

  <a [routerLink]="" (click)="showProject()">project</a>

Answer 3

似乎有用的东西正在替换锚点的 href：

<a href="javascript:void(0)" (click)="showProject()">

Angular2 路由错误地重新加载主页

Angular2 route incorrectly reloads home page

angular

angular2-routing