Angular2路由器错误：无法匹配任何路由：''

Question

我已将Angular2 Router配置如下：

import { provideRouter, RouterConfig } from '@angular/router';
import { Page2} from './page2';

const routes: RouterConfig = [
  { path: 'page2', component: Page2 }
];

export const appRouterProviders = [
  provideRouter(routes)
];

Plnkr可用here

在运行代码时出现错误：

Error: Cannot match any routes: ''

我在这里缺少什么？

Answer 1

您需要为用户位于应用的索引页面的情况指定路线，该路线是路径''，它应如下所示：{ path: '', component: MyComponent }

如果您希望您的默认页面是page2，您必须告诉您的索引路径重定向到它：

{ path: 'page2', component: Page2 },
{ path: '', redirectTo: '/page2', pathMatch: 'full' }

这里的顺序很重要，最具体的路线应该是第一位的。

Answer 2

您应该为''定义默认路由器，例如：

const routes: RouterConfig = [
  { path: '', component: Home }, 
  { path: 'page2', component: Page2 }
];

或者使用重定向：

const routes: RouterConfig = [
  { path: '', redirectTo: '/page2', pathMatch: 'full' }, 
  { path: 'page2', component: Page2 }
];

另请参阅angular2文档中的示例

• https://angular.io/docs/ts/latest/guide/router.html#!#redirect

Answer 3

根据我的理解，您想要通过点击 Page2 作为app.ts页面默认页面并加载page2？

选项1： 快速解决问题

通过解决当前的控制台错误，您可以添加到 app.route.ts

import { App} from './app'; 

const routes: RouterConfig = [
  { path: '', component: App, useAsDefault: true }
  { path: 'page2', component: Page2 }
];

结果将是

但是你会看到你的app.ts html会加载两次！这不是解决的好方法！

选项2：

正如我在项目中使用的那样，我建议你创建新的主页make作为默认页面。然后在app.ts中调用Page2

这是Plnkr http://plnkr.co/edit/vzl9lw

它是否符合您的要求！