angular8 路由初步

路由是什么

路由（导航）本质上是切换视图的一种机制。

路由的导航的URL是否真实存在

angular的路由借鉴了大家熟知的浏览器URL变化导致页面切换的机制

angular是单页程序，路由显示的路径不过是一种保存路由状态的机制，这个路径在web服务器上不存在。

父组件

<router-outlet></router-outlet>

路由定义

定义路由数组：路径，组件，子路由

导入RouterModule:forRoot,forChild

子路由

路径参数

配置：

{
     path:':tabLink',
     component:HomeDetailComponent
}

激活：

<a [routerLink] = "['/home',tab.link,{name:'val1'}]" >..</a>
this.router.navigate(['home',tab.link,{name:'val1'}])

<a [routerLink] = "['/home' [queryParams]={name:'val1'}]" >..</a>
this.router.navigate(['home',{queryParams:{name:'val1'}})

URL:

http://localhost:4200/home/sports;name=val1

http://localhost:4200/home/sports?name=val1

读取：

constructor(private route: ActivatedRoute) { }

this.route.paramsMap.subscribe(params => {params.get('tabLink')})

routerLink:

<a [routerLink]="[ 'grand' ]">link to grand</a>

routerLinkActive

<a 
[routerLink]="[ 'grand' ]" 
routerLinkActive="active" 
[queryParams]="{name:'历史',sex:'难'}">
link to grand</a>

指定的router-outlet

<a 
[routerLink]="[ {outlets:{second:['aux']}}]" >
link to second</a>

children:[
              {
                path:'aux',
                component:HomeAuxComponent,
                outlet:'second'
              }
         ]