在 Angular 中，路由控制是非常重要的一部分。它让我们可以根据 URL 的变化来动态渲染不同的页面内容。Angular 提供了两种不同的路由策略：HashLocationStrategy 和 PathLocationStrategy。本文将详细介绍这两种策略的使用方法，并且提供示例代码。
HashLocationStrategy
HashLocationStrategy 是默认的路由策略。它使用 URL 的哈希部分来表示路由状态。例如，如果我们有一个路由 /home，那么它的 URL 就是 http://example.com/#/home。这种方式的好处是，即使 URL 的哈希部分改变，浏览器也不会重新加载页面，而只是触发 Angular 的路由器重新渲染视图。这样可以提高性能和用户体验。
要使用 HashLocationStrategy，我们需要在 app.module.ts 中进行配置。首先，我们需要引入 RouterModule 和 Routes：
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';然后，我们需要定义我们的路由：
const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'contact', component: ContactComponent },
];最后，我们需要在 imports 中引入 RouterModule.forRoot(routes, { useHash: true })：
@NgModule({
imports: [RouterModule.forRoot(routes, { useHash: true })],
exports: [RouterModule],
})
export class AppRoutingModule {}这样我们就成功地启用了 HashLocationStrategy。
PathLocationStrategy
PathLocationStrategy 也是一种常用的路由策略。它使用 URL 的路径部分来表示路由状态。例如，如果我们有一个路由 /home，那么它的 URL 就是 http://example.com/home。这种方式的好处是，URL 更加直观和友好，但是当 URL 改变时，浏览器会重新加载整个页面，这可能会影响性能和用户体验。
要使用 PathLocationStrategy，我们需要在 app.module.ts 中进行配置。同样地，我们需要引入 RouterModule 和 Routes：
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';然后，我们需要定义我们的路由：
const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'contact', component: ContactComponent },
];最后，我们需要在 imports 中引入 RouterModule.forRoot(routes)：
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}这样我们就成功地启用了 PathLocationStrategy。
如何选择路由策略
选择路由策略取决于您的项目需求和用户体验。如果您的应用程序需要支持旧版浏览器或需要更好的性能和用户体验，那么 HashLocationStrategy 是一个不错的选择。如果您的应用程序需要更加友好的 URL，那么 PathLocationStrategy 是一个更好的选择。
示例代码
以下是一个完整的示例代码，演示了如何在 Angular 中使用 HashLocationStrategy 和 PathLocationStrategy 进行路由控制：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- ------ - ---- ------------------ ------ - ------------- - ---- ------------------- ------ - -------------- - ---- -------------------- ------ - ---------------- - ---- ---------------------- ----- ------- ------ - - - ----- ------- ---------- ------------- -- - ----- -------- ---------- -------------- -- - ----- ---------- ---------- ---------------- -- -- ----------- -------- ----------------------------- - -------- ---- ---- -------- --------------- -- ------ ----- ---------------- -- -- -- ----------- -------- ------------------------------- -------- --------------- -- ------ ----- ---------------- --
结论
在 Angular 中，路由控制是非常重要的一部分。选择合适的路由策略可以提高应用程序的性能和用户体验。HashLocationStrategy 和 PathLocationStrategy 都是不错的选择，取决于您的项目需求和用户体验。在实际项目中，您可以根据需要进行选择。希望这篇文章能够帮助您更好地了解 Angular 中的路由控制。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676bbf4f78388e33bb26bbb2