带有路由器的 Angular 2 redirectTo 不起作用

Question

我正在使用 angular 2 开发我的第一个应用程序，我遇到了一个奇怪的问题。

我的路由配置是这样的:

export const routes: RouterConfig = [
{ path: '', redirectTo: 'login' },
{ path: 'login',  component: Login },
{ path: 'home',   component: Home }
];

当我输入 localhost:3000 时，我会自动重定向到我的 localhost:3000/login ，这是我的登录表单页面。当我输入我的凭据并单击提交时，路由器导航不起作用(控制台中没有错误)，但令人惊讶的是，当我刷新 localhost:3000/login 时，路由器可以正常工作。

我这样称呼路由器:

export class Login {
   constructor(public router: Router, public http: Http) {
   }

login(event, username, password) {
    event.preventDefault();
    //  ...
    this.router.navigate(['/home']);
}

此路由配置可能有什么问题？

Answer 1

您必须省略前导斜杠:

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

您可能还需要在重定向路由上设置 pathMatch: 'full' 属性。

{ path: '', redirectTo: 'login', pathMatch: 'full' }

否则，当有其他可用的更深级别的路由时，您的路由不会触发。