如何在 Angular 中隐藏 URL 中的 # 标签 - 路由答案

【问题标题】：How can hide # tag in URL in angular - routing如何在 Angular 中隐藏 URL 中的 # 标签 - 路由
【发布时间】：2020-04-30 02:27:46
【问题描述】：

为了使路由在服务器主机中正常工作，我们可以在 app-routing.module.ts 文件中启用 useHash = true 。

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule]
})

实际上，通过该解决方案，我们可以在应用程序中很好地导航组件。但它总是在 URL 选项卡中显示 # 标记。

即： http://00.00.190.147:4202/#/request

这似乎是某种奇怪的观点。有没有办法隐藏它或任何其他方式在 Angular 应用程序的主机中进行完美路由。

【问题讨论】：

要使路由在没有哈希的服务器主机中正常工作，您应该正确配置您的服务器angular.io/guide/…
docs.angularjs.org/api/ng/provider/$locationProvider

标签： angular angular-routing

【解决方案1】：

将 useHash 设置为 false。

例如：- RouterModule.forRoot(appRoutes, {useHash: false})

【讨论】：

【解决方案2】：

当您使用ng serve 在本地为您的应用提供服务时，它有自己的服务器配置。您必须同样配置您的服务器，以便所有路由都指向index.html。角度路由器观察浏览器 URL 并更改应用程序的视图。 Angular 应用程序是单页应用程序。

查看https://angular.io/guide/deployment#routed-apps-must-fallback-to-indexhtml，将您的浏览器配置设置为指向 index.html。

另外，如果您有自己的 API 使用相同的域，您可能需要将这些路径放在 angular.json 的 assets 数组中，以便 Angular 应用程序不会将它们视为 Angular 路由并将它们视为资源（只是一个简单的 hack！）如果您使用的是 NodeJs 服务器，则不一定需要这样做，但对于 IIS，它可能是一个很好的 hack。

例如：如果您的 Angular 应用程序在 http://www.example.com 上运行，并且您的 API 类似于 http://www.example.com/api/users、http://www.example.com/api/user/52、http://www.example.com/api/books 等，您应该在 angular.json 文件中的资产数组中添加“api”作为任何内容http://www.example.com/api/ 之后将被视为资产，而不是 Angular 应用程序路径的一部分。

这样做，您可以设置标志 useHash = false 或删除它。 RouterModule.forRoot(routes)

【讨论】：