Angular 2，路由URL路径到应用中的路由答案

【问题标题】：Angular 2, routing URL path to route in the appAngular 2，路由URL路径到应用中的路由
【发布时间】：2017-11-10 22:20:57
【问题描述】：

我有一个托管在 S3 上的 Angular 2 应用程序。路由文件如下所示。

const APP_ROUTES: Routes = [
  { path: 'checkout', component: CheckoutComponent },
  { path: 'thankyou', component: ThankyouComponent },
  { path: 'lander', component: LanderComponent },
  { path: '', component: LanderComponent }
];

如果用户输入www.example.com/checkout，我希望它将他们带到应用程序上的checkout 路线。我认为它会这样做，但 S3 给了我错误没有这样的密钥。有没有办法在 Angular 2 中做到这一点，还是我需要在 S3 中设置？我认为问题在于 S3 将转到 example.com 存储桶，然后期待一个文件夹 checkout。我怎么会让它不这样做，而只是应用程序以及 URL 之后指定的任何路由？

【问题讨论】：

标签： angular

【解决方案1】：

RouterModule.forRoot(APP_ROUTES, { useHash: true })

【讨论】：

谢谢。不过，这不会导致 URL 中出现哈希吗？理想情况下，我只想要 url 路径

【解决方案2】：

RouterModule.forRoot(APP_ROUTES)

{ useHash: true } 是一个选项。添加时，URL 使用哈希。没有它，就没有哈希。

【讨论】：

【解决方案3】：

角度路由策略

使用RouterModule.forRoot将路由APP_ROUTES添加到路由器：

forRoot(routes: Routes, config?: ExtraOptions)

并将配置作为ExtraOptions 和useHash: true 传递：

如果为 true，则启用使用 URL 片段而不是历史 API 的定位策略。

下表比较不同的效果：

useHash	routing strategy used	e.g. routed as	e.g. supposed effect
`false`	PathLocationStrategy (without the hash)	`/checkout`	would go directly to S3 bucket and key `checkout`
`true`	HashLocationStrategy (with the hash symbol)	`#/checkout`	would stay inside your Angular app

绕过 S3 的角度路由

要实现这一点，您可以按如下方式创建路由器：

RouterModule.forRoot(APP_ROUTES, { useHash: true })

这个问题涉及同样的问题：Angular 4 routing --prod mode

角度路由策略

绕过 S3 的角度路由

另见