Angular 学习（五）：Angular 路由（Route）_angular route

Routes 路由数组

路由器需要先配置才会有路由信息, 并用 RouterModule.forRoot 方法来配置路由器。 当浏览器的 URL 变化时， 路由器会查找对应的 Route（路由）， 并据此决定该显示哪个组件。
基础配置：

const appRoutes: Routes = [
  { path: 'common/a', component: AComponent },
  { path: 'common/b/:id', component: BComponent },
  { path: '**', component: NotFoundComponent}, // 定义通配符路由
];

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

RouterOutlet 路由出口

RouterOutlet 是一个来自路由模块中的指令，它的用法类似于组件。 它扮演一个占位符的角色，用于在模板中标出一个位置，路由器将会把要显示在这个出口处的组件显示在这里。

 <h1>组件的内容显示在（router-outlet）下方</h1>
 <router-outlet></router-outlet>

Router 路由器

使用 Router 对象导航。

constructor(private router: Router) {}

toAComponent() {
    this.router.navigate(['/common/a']);
    // 或 this.router.navigateUrl('common/a');
}

RouterLink 路由器链接

路由链接 url 必须以 ‘/’ 开头。

<a [routerLink]="['/']">主页</a>
<a [routerLink]="['/common/b', id]">B组件</a>
<router-outlet></router-outlet>

ActivatedRoute 激活的路由

当前激活的路由的路径和参数可以通过 ActivateRoute 的路由服务来获取。

• 常用属性：

属性	说明
url	路由路径的 Observable 对象，是一个由路由路径中的各个部分组成的字符串数组.
data	一个 Observable，其中包含提供给路由的 data 对象。也包含由解析守卫（resolve guard）解析而来的值。
paramMap	一个 Observable，其中包含一个由当前路由的必要参数和可选参数组成的 map 对象。用这个 map 可以获取来自同名参数的单一值或多重值。
queryParamMap	一个 Observable，其中包含一个对所有路由都有效的查询参数组成的 map 对象。 用这个 map 可以获取来自查询参数的单一值或多重值。

在路由时传递数据

• 在查询参数中传递数据

/common/b?id=1&name=2 => ActivatedRoute.queryParamMap

• 在路由路径中传递数据

{path: /common/b/:id} => /commo/b/1 => ActivatedRoute.paramMap

• 在路由配置中传递数据

{path: /common/b, component: BComponent, data: {id:“1”, title: “b”}}

• 示例

constructor(
    private activatedRoute: ActivatedRoute
) { }

ngOnInit() {
   // 从参数中获取
    this.activatedRoute.queryParamMap.subscribe(params => {
      this.id = params.get('id');
    });

   // 或
  // this.activated.snapshot.queryParamMap.get('id');

    // 从路径中获取
    this.activatedRoute.paramMap.subscribe(params => {
      this.id = params.get('id');
    });

    this.activatedRoute.data.subscribe(({id,title}) => {

    });
}

snapshot: 参数快照，是一个路由信息的静态快照，抓取自组件刚刚创建完毕之后，不会监听路由信息的变化。如果确定一个组件不会从自身路由到自身的话，可以使用参数快照。

subscribe: 参数订阅，相当于一个监听器，会监听路由信息的变化。

重定向路由

在用户访问一个特定的地址时，将其重定向到另一个指定的地址。
配置重定向路由：

// 当访问根路径时会重定向到 home 路径
const appRoutes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full'},
  { path: 'home', component: HomeComponent}
];

子路由

子路由配置语法：

const appRoutes: Routes = [
  { 
    path: 'home', 
    component: HomeComponent,
    children: [
      { path: '', component: AComponent},
      { path: 'b', component: BComponent}
    ]
  },
];

最后

正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！

component: HomeComponent,
children: [
{ path: ‘’, component: AComponent},
{ path: ‘b’, component: BComponent}
]
},
];

### 最后

正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！



![前端资料图.PNG](https://img-blog.csdnimg.cn/img_convert/a521e2bf6585ff1d5df2d6ad71f75420.webp?x-oss-process=image/format,png)