Angular路由参数

get传值

• 无需配置路由
• 传参

<a routerLink="/home" [queryParams]="{params: 123}"></a>

• 获取

constructor(private route: ActivatedRoute) {
  this.route.queryParams.subscribe(res => {
    console.log(res);
  })
}

动态路由

• 路由配置

const routes: Routes = [
  {path: 'home/:id', component: HomeComponent}
];

• 传参

<a [routerLink]="['/home', 123]"></a>

• 获取

constructor(private route: ActivatedRoute) {
  this.route.params.subscribe(res => {
    console.log(res);
  })
}

js跳转

• 动态路由跳转

jump() {
  this.route.navigate(['home', 123]);
}

• get传参方式跳转

jumpGet() {
  const naviation: NavigationExtras = {
    queryParams: {id: 321},
    fragment: 'anchor'
  }
  this.route.navigate(['home'], naviation);
}