angular路由详解四（子路由）

Posted 2020-10-11

子路由是相对路由

路由配置部分：

主要是children

const routes: Routes = [

{path:‘home‘, component: HomeComponent,

　　children:[

　　　　{

　　　　path:‘homeDetail/:id‘,

　　　　component:HomeMenuComponent

　　　　},{

　　　　path:‘‘,

　　　　component:HomeListComponent

　　　　}

　　]

} 

]

第一种是通过标签跳转

这里是./(相对路径)不是/（绝对路径）

 

<a [routerLink] = "[‘./homeDetail‘,10]">haha</a>

第二种是点击按钮通过Router路由子界面

 

import { Router,ActivatedRoute } from "@angular/router";

 

constructor(private router: Router,private routeInfo:ActivatedRoute){}

 

 

 

nav():void {

this.router.navigate([‘homeDetail‘,100],{relativeTo:this.routeInfo});

}