angular路由详解四(子路由)

时间:2022-12-27 16:16:56

子路由是相对路由

路由配置部分:

主要是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});
}