Angular 2+ 应用程序中去掉丑陋的 URL hash

Angular 是一个流行的前端框架，它引入了单页应用 (SPA) 的概念。在 SPA 中，整个应用程序是在客户端加载的，而服务器只负责提供初始 HTML 和资源。这使得 SPA 具有快速加载和响应式等优点。

但是，SPA 也有一些缺点，其中之一就是 URL 中会出现 hash。例如，当你打开一个 SPA 的页面时，你会看到 URL 中有一个 # 符号，后面跟着一些参数。

为什么要去除？

• #有点丑。
• 在某些情况下，它可能会导致问题。
• 在大多数情况下，除了 Angular 自身，没有其他地方使用 #。

怎样才能去除？

有几种方法可以从 Angular 应用程序中删除 #。

1. 使用 HTML5 路由
   HTML5 路由是一种新的路由方式，它使用 HTML5 的 pushState API 来更新浏览器历史记录，而不重新加载页面。
   Angular 2+ 支持 HTML5 路由，你只需要在 @angular/router 模块中导入 RouterModule.forRoot()，并在你的组件中使用 <router-outlet> 标签来指定路由的内容。

2. 使用 HashLocationStrategy
HashLocationStrategy 是 Angular 的一个内置策略，它使用 # 来更新浏览器历史记录。如果你想使用 HashLocationStrategy，你需要在 @angular/router 模块中导入 HashLocationStrategy，并在 RouterModule.forRoot() 中指定它。

3. 使用自定义 LocationStrategy
   如果你不想使用 HashLocationStrategy，你也可以创建一个自定义的 LocationStrategy。
   为此，你需要实现 LocationStrategy 接口，并在 RouterModule.forRoot() 中指定它。

4. 使用替代方法实现前端路由
   如果你想完全摆脱 #，你也可以使用替代方法来实现前端路由。
   例如，你可以使用 history.pushState() API 来更新浏览器历史记录，或者你可以使用一个前端路由库，如 react-router 或 vue-router。

请注意，在从 Angular 应用程序中删除 # 之前，你需要考虑以下几点：

• 如果你的应用程序需要支持旧版本的浏览器，你可能需要继续使用 #。
• 如果你正在使用第三方库或服务，你可能需要确保它们与你选择的路由策略兼容。
• 你需要考虑 SEO（搜索引擎优化）的影响。例如，如果你使用 history.pushState() API，你需要确保你的应用程序的页面可以被搜索引擎正确索引。