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

Question

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

当我转到根目录时，我的应用程序似乎会立即路由。

localhost:8080/

当我在我的应用程序中移动时，路由会更新，但似乎如果我在某个地方：localhost:8080/dashboard 在基本情况下，并进行硬刷新，它会失败。它会给我一个 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

路由仅存在于您的应用程序中，服务器什么都不知道，它只是检查路径 /dashboard 或 /detail/14 是否默认 page/file 不存在。

您必须将服务器路由器配置为导航到应用程序 index.html（此处为您的 html 名称）以获取所有应用程序路由。

Answer 2

如果 localhost:8080/#/dashboard 有效但 localhost:8080/dashboard 失败，则表明您使用的是 HashLocationStrategy 而不是 PathLocationStrategy。

检查您的 bootstrap() 函数或其他地方，确保没有注入 HashLocationStrategy。

Answer 3

要切换到 HashLocationStrategy，请将提供商更改为

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

如果您想使用 PathLocationStrategy，您可以使用这个 pub serve-wrapper https://pub.dartlang.org/packages/pub_serve_rewrites，它允许将 PathLocationStrategy 与 pub serve 一起使用。

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

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

Routing doesn't work for me when doing a hard refresh

angular

angular-dart

angular2-routing