23、Angular开发实战：路由、组件与数据绑定全解析

Angular开发实战：路由、组件与数据绑定全解析

1. 路由配置

在Angular项目里，路由是在模块定义中进行配置的。每一项配置都是一组对象，每个对象指定一条路由规则，这些规则用于将URL转换为要在 <router-outlet> 中加载的组件实例。例如，AngularVSTemplate应用的路由规则如下：

[
  { path: '', component: HomeComponent, pathMatch: 'full' },
  { path: 'counter', component: CounterComponent },
  { path: 'fetch-data', component: FetchDataComponent },
]

这些规则会按顺序依次尝试匹配，直到找到匹配的规则为止。当 path 中指定的字符串与URL的开头匹配时，规则就会触发，但可以通过将 pathMatch 属性设置为 full 来要求完全匹配。

路径	组件	匹配方式
’‘	HomeComponent	full
‘counter’