Angular 2 路由无法匹配任何路由

Question

我试图在登录时重新路由到另一个页面，但由于某些原因，我的路由似乎不起作用。它一直告诉我它在我的路由器中 "Cannot match any routes"。我清楚那里有路线，我已经尝试了各种方法让它与路径相匹配。也许另一双眼睛可以看到我看不到的东西。

AppRouter.module:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { LoginComponent } from '../Components/login.component';
import { MenuComponent } from '../Components/menu.component';

const routes: Routes = [
{ path: '', redirectTo: '/login', pathMatch: 'full' },
{ path: 'login', component: LoginComponent },
{ path: 'menu', component: MenuComponent }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRouter {}

login.component.module:

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

@Component({
  templateUrl: '../Templates/login.component.html'
})
export class LoginComponent {
  title = 'app works!';
  username: string = 'user';
  password: string = 'password'

  constructor(private router: Router){

  }

  validate(): void{
    if(this.username === "user" &&
      this.password === "password"){
      console.log("Logged In!");
      this.router.navigate(['../main']);
    }
    else {
          console.log(this.username + ' ' + this.password);
    }
  }
}

导入我的模块就好了，menu.component超级基础，没有错别字。如果我在标签内添加 "Route Link" 它将打开，但没有其他方式。任何想法都会很棒，谢谢。

Answer 1

将 this.router.navigate(['../main']); 更改为 this.router.navigate(['./menu']);。您不希望路由器上升一个级别，因为这两个组件由 [host]/login 和 [host]/menu 提供服务，它们在层次结构上处于同一级别。

Answer 2

我认为你拼错了……

这在您的路由配置中：

{ path: 'menu', component: MenuComponent }

这是你的组件

this.router.navigate(['../main']);

两个不同的词：menu 和 main

第二种情况的另一个问题可能是双点。你应该使用一个，因为它是同一级别（两个点用于 'one level more'）

Angular 2 路由无法匹配任何路由

Angular 2 Routing cannot match any routes

routing

angular2-routing

angular