Question

我制作3页和导航菜单。单击菜单后，将重新加载朋克页面。

tpl：

<a (click)="toLogin()">Login</a> |
<a (click)="toHome()">Home</a> | 
<a (click)="toCatalog()">Catalog</a>       
<router-outlet></router-outlet>

组件：

toLogin() {
  location.href = '/#/login';
  location.reload();
}

toHome() {
  location.href = '/#/home';
  location.reload();
}

toCatalog() {
  location.href = '/#/catalog';
  location.reload();
}

结果是我没有得到SPA应用程序，发bun。路由工作正常。

问题如下：构建完成并部署后，用户将没有机会浏览页面。路由器始终重定向到默认地址

路由器：

imports: [
  RouterModule.forRoot([
    { path: '', redirectTo: '/login', pathMatch: 'full'},
    { path: 'login', component: LoginViewComponent },
    { path: 'home', component: HomeViewComponent },
    { path: 'catalog', component: CatalogViewComponent },
    { path: '**', redirectTo: 'login' }
  ], { useHash: true })
],

请帮助修复构建路由。

LIVE DEMO is here

重要：每次单击菜单后我都需要重新加载页面

Answer 1

您应该使用routerLink：

<div class="container">
    <a [routerLink]="['/login']" (click)="toLogin()">Login</a> |
    <a [routerLink]="['/home']" (click)="toHome()">Home</a> | 
    <a [routerLink]="['/catalog']" (click)="toCatalog()">Catalog</a> 
    <router-outlet></router-outlet>
</div>

点击事件可用于触发其他功能。

为什么总是加载默认路由器？

1 个答案: