Question

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

似乎我的应用程序将立即路由到我的根目录。

本地主机：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

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

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

如果您想使用PathLocationStrategy，可以使用pub serve - 包装https://pub.dartlang.org/packages/pub_serve_rewrites，允许PathLocationStrategy与pub serve一起使用。

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

Answer 2

路由仅存在于您的应用中，服务器不知道任何内容，它只检查路径/dashboard或/detail/14以查找不存在的默认页面/文件。

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

Answer 3

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

检查bootstrap()功能或其他地方，确保没有注入HashLocationStrategy。

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

3 个答案: