路由是什么
路由(导航)本质上是切换视图的一种机制。
路由的导航的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'}]
如果觉得《angular8 路由初步》对你有帮助,请点赞、收藏,并留下你的观点哦!