在进行硬刷新时,路由对我不起作用

Question

我在看这个源代码:https://github.com/angular/angular.io/blob/master/public/docs/_examples/toh-5/dart/lib/app_component.dart

而且当我转到根目录时,我的应用程序似乎正在路由.

本地主机:8080 /

当我在我的应用程序中移动时路由更新,但似乎如果我在某个东西: localhost:8080/dashboard在一个basecase中,并进行硬刷新,它失败了.它会给我一个404 not found!错误.

如果我这样做它会工作:localhost:8080/#!/dashboard但这不是传递给我的应用程序的地址.

在index.html我有: <base href="/">

我的App_Component.dart文件如下:

import 'package:angular2/angular2.dart';
import 'package:angular2/router.dart';

import 'hero_component.dart';
import 'heroes_component.dart';
import 'dashboard_component.dart';
import 'hero_service.dart';
@Component(
    selector: "my-app",
    directives: const [ROUTER_DIRECTIVES],
    providers: const [HeroService, ROUTER_PROVIDERS],
    templateUrl: "app_component.html")
@RouteConfig(const [
  const Route(
      path: "/dashboard",
      name: "Dashboard",
      component: DashboardComponent,
      useAsDefault: true),
  const Route(
      path: "/detail/:id", name: "HeroDetail", component: HeroDetailComponent),
  const Route(path: "/heroes", name: "Heroes", component: HeroesComponent)
])
class AppComponent {
  String title = "Tour of Heroes";
}

似乎我有路由工作除了这个以外的一切.

我想要的最终状态是:localhost:8080/detail/14,它会打开正确的组件.这是现在在新网站引用上完成的事情,就像在整个应用程序中导航一样.

Answer 1

切换到将HashLocationStrategy提供商更改为

bootstrap(AppComponent, [
  HeroService, 
  ROUTER_PROVIDERS,
  provide(LocationStrategy, useClass: HashLocationStrategy)
])

如果您想使用，PathLocationStrategy可以使用此pub serve包装器https://pub.dartlang.org/packages/pub_serve_rewrites，它允许PathLocationStrategy与pub serve.

对于部署，您需要配置您使用的网络服务器以支持 HTML5 PushState。