Question

我正在尝试在登录时重新路由到另一个页面，但出于某种原因，我的路线似乎无法正常工作。它一直告诉我它＆＃34;无法匹配任何路线＆＃34;在我的路由器。我显然有那条路线，我已经尝试了各种方法使它与路径相匹配。也许另一组眼睛可以看到我不知道的东西。

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是超级基本的，并且没有拼写错误。如果我添加一个＆＃34; Route Link＆＃34;在标签内部，它将打开，但没有别的办法。任何想法都会很棒，谢谢。

Answer 1

我认为你拼错了......

这是在您的路线配置中：

{ path: 'menu', component: MenuComponent }

这是你的组件

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

两个不同的词：menu和main

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

Answer 2

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

Angular 2 Routing无法匹配任何路由

2 个答案: