1、路由概念

路由就是连接组件的筋络，是树形结构。把路由看成是一组规则，它决定了url的变化对应着哪一种状态，具体表现就是不同视图的切换。
在angular中，路由是非常重要的组成部分，组件的实例化与销毁，模块的加载，组件的某些生命周期钩子的发起,都是与它有关。
路由器是一个调度中心，它是一套规则的列表，能够查询当前URL对应的规则，并呈现出相应的视图。
路由是列表里面的一个规则，即路由定义，它有很多功能字段:

  • path字段,表示该路由中的URL路径部分
  • Component字段,表示与该路由相关联的组件

2、路由使用

每个带路由的Angular应用都有一个路由器服务的单例对象，通过路由定义的列表进行配置后使用。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { STDetailComponent } from './stdetail/stdetail.component';
import { STListComponent } from './stlist/stlist.component';

const routes: Routes = [
  {
    path:'list',
    component:STListComponent
  },
  {
    path:'detail/:id',
    component:STDetailComponent
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
//路由导航 
<a [routerLink]="['/home']" routerLinkActive="router-link-active">首页</a>
<a [routerLink]="['/list']" routerLinkActive="router-link-active" >列表</a>
<a [routerLink]="['/detail', '123']" routerLinkActive="router-link-active" >详情</a>

//组件渲染输出
<router-outlet></router-outlet>

上述流程可描述为：

  • 当地址栏URL变化时路径部分​​/home​​满足列表中path为"home"的路由定义，激活对应STHomeComponent的实例，显示它的视图
  • 当应用程序请求导航到路径​​/list​​时，符合了另外的规则,激活对应视图且展示内容，并将该路径更新到浏览器地址栏和历史

3、路由嵌套

父子路由嵌套配置：

{
    path:'home',
    component: STHomeComponent,
    children: [
      {
        path:'user',
        component: STUserHomeComponent,
      },
      {
        path:'order',
        component: STOrderHomeComponent,
      },
    ]
  }

在STHomeComponent内这是​​router-outlet​​路由出口，即可在home 路由内渲染子级路由

//home template
<a [routerLink]="['/home/user']" routerLinkActive="router-link-active">用户</a>
<a [routerLink]="['/home/order']" routerLinkActive="router-link-active" >订单</a>
<!-- 路由组件渲染的位置 -->
<router-outlet></router-outlet>

​在非​​STHomeComponent​​​内跳转到​​/home/user​​路由需要写全路径

//app template
<a [routerLink]="['/home/user']" routerLinkActive="router-link-active">用户</a>
<a [routerLink]="['/home/order']" routerLinkActive="router-link-active" >订单</a>
<!-- 路由组件渲染的位置 -->
<router-outlet></router-outlet>

4、路由传参

  • query：在a标签上添加一个参数queryParams，并通过​​this.routerinfo.snapshot.queryParams​​获取参数
<a [routerLink]="['/detail/999']" [queryParams]="{name:'tom'}">详情-queryParams</a>
import { ActivatedRoute } from '@angular/router';
constructor(private routerInfo:ActivatedRoute) { }

ngOnInit(): void {
  let queryParams = this.routerInfo.snapshot.queryParams
  console.log(queryParams)
  console.log(queryParams['name']);
}
  • params：修改路由配置文件​​path​​​，路由导航​​a​​​标签​​routerLink​​​后面数组的第二个参数为传递的值，并且通过​​subscribe​​​请阅的方式获取​​id​​参数
{
    path:'detail/:id',
    component:STDetailComponent
  },
<a [routerLink]="['/detail/999']" [queryParams]="{name:'tom'}" routerLinkActive="router-link-active" >详情-queryParams</a>
ngOnInit(): void {
import { ActivatedRoute, Params} from '@angular/router';
id: string = ''
constructor(private routerInfo:ActivatedRoute) { }
  this.routerInfo.params.subscribe((params:)=>{
    this.id = params['id']
  })
}