Question

我正在尝试教程Angular2教程，但它似乎并不了解刷新后的路线。源代码可以在https://angular.io/resources/live-examples/tutorial/ts/plnkr.html

上找到

@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <a [routerLink]="['Dashboard']">Dashboard</a>
    <a [routerLink]="['Heroes']">Heroes</a>
    <router-outlet></router-outlet>
  `,
  styleUrls: ['app/app.component.css'],
  directives: [ROUTER_DIRECTIVES],
  providers: [HeroService]
})
@RouteConfig([
  {path: '/dashboard', name: 'Dashboard', component: DashboardComponent, useAsDefault: true},
  {path: '/heroes', name: 'Heroes', component: HeroesComponent},
  {path: '/detail/:id', name: 'HeroDetail', component: HeroDetailComponent}
])

它的作用是用/替换基础/dashboard但是当您刷新页面时，我希望它能够理解/dashboard === /dashboard和不是/，因为它认为它是基本目录，因此链接显示/dashboard/dashboard并且ts无法加载，因为它们以相对方式包含。

Answer 1

您需要一台能够处理HTML5 pushState的服务器或通过将follogin添加到PathLocationStrategy

，将位置策略从HashLocationStrategy更改为bootstrap()

bootstrap(AppComponent[
  ROUTER_PROVIDERS,
  /* after ROUTER_PROVIDERS */
  provide(LocationStrategy, {useClass: HashLocationStrategy}). 
]);

另见Is Angular 2's Router broken when using HTML5 routes?

Angular2路由如何去基目录

1 个答案: