angular的路由例子

app.routing.module.ts里面，关键部分

const routes: Routes = [

  { path: '', redirectTo : 'c3/c2/mmc', pathMatch: 'full'},

  { path: 'c3', component: C3Component,

    children: [

      { path: 'c2/:name', component: C2Component},

    ]

  },

  { path: '**', component: ErrorComponent}

];

C2Component关键部分

export class C2Component implements OnInit {

  // tslint:disable-next-line:variable-name

  private _router: ActivatedRoute

  constructor(router: ActivatedRoute) {

    this._router = router;

  }

  ngOnInit() {

    let name = this._router.snapshot.params["name"];

    let queryId = this._router.snapshot.queryParams["id"];

    console.log(name, queryId);

  }

}

c3.component.html里面关键部分

<h1>c3 page</h1>

<!--下面这个一定要写，否则会无法渲染子路由组件-->

<router-outlet></router-outlet>

测试连接地址

http://localhost:4200/c3/c2/aaa?id=123234