路由是什么（what）

在web开发中，路由是指将应用划分成多个分区，通常是按照从浏览器的URL衍生出来的规则进行分割。

为什么需要路由（why）

在应用中使用路由，可以

• 将应用程序划分为过个分区；
• 维护应用程序的状态；
• 基于某些规则保护应用分区。

也有可能你想的是，我们的应用程序是客户端，变换页面并不一定要更改URL。但是，若所有的页面使用同样的URL，会有什么后果呢？

• 刷新页面后，无法保留你当前的位置。
• 不能为页面添加书签，方便以后返回到相同的页面。
• 无法与他人分享当前页面的URL。

所以说，使用路由能让我们定义URL字符串，指定用户在应用中的位置。

简单的路由配置（How）

配置Angular路由时三种主要部件：

• Routes：描述了应用程序支持的路由配置
• RouterOutlet：这是一个占位符组件，用于告诉Angular要把这个路由的内容放在哪里。
• RouterLInk指令：用于创建各种路由链接。

路由配置方法

1. 创建一个Routes配置

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contacts', component: ContactComponent },
  { path: 'contact', redirectTo: 'contacts' },
  { path: 'styling', component: StylingComponent},
  { path: 'popup', component: PopupComponent}
];

路由配置中的关键词的意义：

• path：指定了该路由要处理的URL路径。
• component：当前路由对应的组件。
• redirectTo：用于将当前路由重定向到另一已知的路由上，是一个可选项。

2. 安装路由配置
   （1）导入RouterModule
   （2）在NgModule中的imports数组里使用RouterModule.forRoot(routes)来安装路由配置。
3. 使用<router-outlet>调用RouterOutlet指令
   router-outlet元素标示了各个路由组件的内容应该在哪里被渲染。

未完待续。。。