配置路由答案

【问题标题】：Configure routing配置路由
【发布时间】：2016-04-13 03:33:03
【问题描述】：

我使用@RouteConfig 创建了一个示例应用程序，它运行良好。查看根据配置添加的 url 更改和视图，但是当我刷新页面时，它显示 404 错误。

我正在使用 WebStorm IDE 来构建和运行应用程序。

在 angular.io 上给出的实时示例也会出现同样的问题。

我已经在https://angular.io/resources/live-examples/router/ts/plnkr.html 上下载了 AngularJS2 中路由和导航的示例代码示例，该示例代码示例在 angular.io 上提供，并将项目打开到 WebStorm 并运行它。

它工作正常，但在执行一些路由然后刷新页面后显示 404 错误。

【问题讨论】：

标签： javascript routing http-status-code-404 angular

【解决方案1】：

Angular 2（默认）使用 html5 pushState 来表示路由器状态。这意味着状态之间的实际网址更改。

例如，对于主页，您可能位于 url：/，然后单击某些内容，您的地址将变为 /newAddress。这是使用 pushState api 和纯前端完成的。但是如果您刷新页面，服务器会尝试在/newAddress 上呈现资源，但是当然，服务器上没有这样的资源。您需要将您的服务器配置为托管 / 无论 url 是什么，但我不知道它是否可能在 WebStorm 内部服务器中。可以安装使用superstaticnpm package。

OR... 您可以将 Angular 2 配置为使用基于 hashbang 的 url（例如 /#/ 和 /#/newAddress）。这样，您每次都从后端的角度点击/。

This page有详细解释。

【讨论】：

【解决方案2】：

确保你已经包含了一个

<base href="/">

在你的头部。除此之外，我们还需要更多信息。

【讨论】：

【解决方案3】：

这将解决您的问题，将其添加到您的引导程序中

从 'angular2/platform/browser' 导入 {bootstrap}；

import {provide}   from 'angular2/core';
    bootstrap(AppComponent,[ROUTER_PROVIDERS,
        provide(LocationStrategy, { useClass: HashLocationStrategy })]);

现在，每当您刷新或硬重新加载时，@RouteConfig 中定义的默认组件都会被加载。

在您的 AppComponent 中：

@RouteConfig([
    {path: '/login', name : 'Login' , component : Login , useAsDefault: true}
])

【讨论】：