Question

我正在加载登录组件，但是当我按下登录按钮时，网址会更改为Dashboard，但没有其他任何事情发生，我看到控制台或其他任何内容都没有错误，因此我无法诊断问题。我确信这很简单，但没有错误，我不知道该怎么办？

导航：

public onLogin(value: any) {
  this.router.navigateByUrl('/dashboard')


// this.loginService.onLogin(value)
//   .subscribe(
//     value => {
//       console.log('[POST] login Registrant successfully', value);
//     }, error => {
//       console.log('FAIL to login Registrant!');
//     },
//     () => {
//       console.log('POST Registrants - now completed.');
//     });
  this.submitted = true;
}

路由模块：

import { Routes, RouterModule } from '@angular/router';
import { ModuleWithProviders } from '@angular/core';
import {LoginComponent} from "./login/login.component";
import {DashboardComponent} from "./dashboard/dashboard.component";


export const appRouter: Routes = [
  {
    path: '**',
    component: LoginComponent
  },
  {
    path: 'dashboard',
    component: DashboardComponent
  }
];

export const appRoutes: ModuleWithProviders = RouterModule.forRoot(appRouter);

Answer 1

首先不要使用通配符路由作为登录路由..

基本上你的通配符路由是，如果有人到达不存在的路径显示某个组件，如果你把它放在路由堆栈的顶部..那么路由将始终路由到通配符，无论什么

您的路由组件应如下所示..

export const appRouter: Routes = [
  {
    path: '',
    component: LoginComponent
    pathMatch: full
  },
  {
    path: 'dashboard',
    component: DashboardComponent
  },
  {
    path: '**',
    component: PageNotFoundComponent
  },

];

通配符路由**用于找不到页面的组件，并始终确保它在最后

然后在您的登录组件中使用此

this.router.navigate(['dashboard']);

Answer 2

你的app.module说。

export const appRouter: Routes = [
  {
    path: '**',
    component: LoginComponent
  },
  {
    path: 'dashboard',
    component: DashboardComponent
  }
];

path: '**'将匹配每个链接。所以无论路由如何，LoginComponent都会返回。尝试更改订单。喜欢

export const appRouter: Routes = [
      {
        path: 'dashboard',
        component: DashboardComponent
      },
      {
        path: '**',
        component: LoginComponent
      }
    ];

始终将path: '**'放在最后。这意味着如果所有路径都失败，请匹配。

路由器没有导航

2 个答案: