angular - Angular 5 URL 重写问题

Question

我构建了一个具有两条路线的 Angular 5 应用程序。我目前有: 主页/每日摘要和主页/文档。当我将应用程序发布到服务器(带有 URL 重写的 IIS 6.0)并导航到 Home.aspx 页面时，一切都运行良好，如果我单击这些链接，我的路由会将我定向到 DailySummary 和 Documents。我遇到的问题是刷新或导航到页面而不转到 Home.aspx，它会将我定向到根文件夹。我确信这与我的 URL 重写规则有关:

<rule name="RewriteRules" stopProcessing="true">
      <match url=".*" />
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      </conditions>
      <action type="Redirect" url="/NewWebApp/" />
</rule>

我的 Home.aspx 页面具有相同的 href 值 (“/NewWebApp/”)

我不知道如何转到 Home.aspx 然后导航到特定路线。

我的 Web.config 和 Home.aspx 位于我的项目的根目录中。

这是我的路线(如果有帮助的话)。

const appRoutes: Routes = [
{ path: 'Home.aspx', redirectTo: 'Home/DailySummary', pathMatch: 'full' },
{ path: '', redirectTo:'Home/DailySummary', pathMatch:'full' },
{
    path: 'Home', component: INHome, children: [
        { path: 'DailySummary', component: DailySummary },
        { path: 'Documents', component: Documents },
        { path: 'Safety',component: Safety},
        { path:'', redirectTo:'DailySummary', pathMatch:'full'}
    ]
},
{path:'**',redirectTo:'Home/DailySummary', pathMatch:'full'}
]

感谢您的帮助。如果您需要更多信息，请告诉我。

Answer 1

这是 Angular 的 PathLocationStrategy 工作方式的问题。 它会生成漂亮的 URL，但它会表现出您正在经历的行为 - 除非您进行大量黑客攻击，否则用户必须加载应用程序的索引页来引导应用程序，因此将书签添加到其他位置(并重新加载)不起作用。

我发现解决此问题的最简单方法是完全避免问题并使用文档中所谓的“老派”方法 - 将路由器切换到 HashLocationStrategy。你最终会得到像 http://mydomain/index.html#somelocation 这样的 URL。而不是http://mydomain/somelocation ，但用户真的关心吗？

结果是“丑陋”的 URL 可以正常工作 - 书签和重新加载都可以正常工作，因为您总是加载 index.html

参见https://angular.io/guide/router#browser-url-styles了解更多信息。