先看路由表
export const parentRoutes:RouterConfig=[
{path:'',redirectTo:'parent',pathMatch:'full'},
{path:'parent',component:parent,
children:[
{path:'home',component:home},
{path:'child',component:child},
{path:'',redirectTo:'home',pathMatch:'full'}
]
}
]
绝对路径
绝对路径是以“/”开头,,需要使用完整路由并与路由表一致如:
<a [routerLink]="['/parent/child']">link to child</a>
命令行:this.router.navigate(['/parent/child'])
相对路径
相对路径以“../”(上级目录),或“./”开头(当前目录),是指相对于当前组件的
<a [routerLink]="['../child']">link to child</a>
命令行:constructor(private router:Router, private route:ActivatedRoute) {
}
onClick() {
this.router.navigate(['./child'], {relativeTo: this.route});
}
注意这里使用了ActivatedRoute,指当前相对于当前的路由
本文详细介绍了在前端应用中如何进行路由配置,并解释了绝对路径与相对路径的区别及使用方式。通过具体的代码示例,展示了如何利用Angular的路由器实现页面跳转。

2105

被折叠的 条评论
为什么被折叠?



