Angular 8 启用路由 - Javascript

Angular 是一个非常强大和流行的前端框架，它的路由功能可以让我们在不刷新整个页面的情况下切换不同的视图，给用户带来更好的用户体验。

在本文中，我们将介绍如何在 Angular 8 中启用路由，并创建一个简单的路由示例。让我们开始吧！

步骤1 - 安装angular/router模块

首先，我们需要安装 Angular 路由模块。可以通过以下命令来安装：

npm install @angular/router --save

步骤2 - 创建路由

我们需要在 app.module.ts 文件中创建路由。打开该文件，找到 @NgModule 装饰器，并在其中添加对 RouterModule 模块的引用。

import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent }
];

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

routes 定义了路由的配置。我们定义了三个路由：

• 空路由：指向 HomeComponent 组件
• /about 路由：指向 AboutComponent 组件
• /contact 路由：指向 ContactComponent 组件

步骤3 - 创建导航

我们需要在 HTML 中创建导航，以便用户可以在我们定义的路由之间进行导航。

在 app.component.html 文件中添加以下导航链接：

<nav>
  <ul>
    <li><a routerLink="/">Home</a></li>
    <li><a routerLink="/about">About</a></li>
    <li><a routerLink="/contact">Contact</a></li>
  </ul>
</nav>

<router-outlet></router-outlet>

这将创建一个基本导航和一个 <router-outlet> 容器。

步骤4 - 创建组件

我们需要创建 HomeComponent、AboutComponent 和 ContactComponent 组件。

使用 Angular CLI 快速生成组件：

$ ng generate component home

$ ng generate component about

$ ng generate component contact

每个组件都是一个简单的 UI 组件，我们可以在其中添加需要的标记和样式。

步骤5 - 运行应用程序

现在，我们已经创建了所有必需的组件和路由。我们可以使用以下命令在本地运行应用程序：

$ ng serve

这将启动开发服务器并启动我们的 Angular 应用程序。

总结

恭喜，您已经学会如何在 Angular 8 中启用路由以及如何创建一个简单的路由示例！在本文中，我们介绍了如何安装路由模块、创建路由和导航、创建组件和运行应用程序。

完整代码示例可以在 Angular 官方文档 中找到。