文章目录
1. 路由的组成
2. 如何指定相对路由?
在 html 中
在html中使用相对路径来指定相对路由。
/
开头的形式,路由器会从应用的 根路由 开始查找。
./
或 无前导斜线
形式是相对于 当前级别 的。
../
会回到当前路由路径的 上一级 。(比如:可以使用…/回到上一级,然后再进入兄弟路由路径中。)
<a routerLink="../second-component">Relative Route to second component</a>
在 ts 中
在ts中用 Router.navigate
方法配合 NavigationExtras
中的 relativeTo
属性来指定相对路由。我们必须提供当前的 ActivatedRoute
,来让路由器知道我们现在位于路由树中的什么位置。
constructor(
private router: Router,
private route: ActivatedRoute
) {
}
goToItems() {
// navigate方法的参数2是NavigationExtras对象。把该对象的relativeTo属性设置为当前的ActivatedRoute,也就是this.route 。
this.router.navigate(['items'], {
relativeTo: this.route });
}
3. RouterLink
路由参数
RouterModule中带参数的路由定义:
{
path: 'hero/:id', component: HeroDetailComponent }
在视图中设置路由参数:
<a [routerLink]="['/hero', hero.id]">
<!-- 路由出口扮演一个占位符的角色,表示路由组件将会渲染到哪里。-->
<router-outlet></router-outlet>
链接参数数组
3种形式:
<!-- 方式一 -->
<a [routerLink]="['/heroes']">Heroes</a>
<!-- 方式二:指定路由参数 -->
<a [routerLink]="['/hero', hero.id]"></a>
<!-- 方式三:在对象中提供可选的路由参数 -->
<a [routerLink]="['/crisis-center', { foo: 'foo' }]">Crisis Center</a>
几种写法的示例
示例A:相对于当前路径级别进行导航。
<!-- 场景:当前页面处于/xxx/xxxxx/overview,当点击”日志“时,会导航到/xxx/xxxxx/logs -->
<a [routerLink]="['overview']">概览</a>
<a [routerLink]="['logs']">日志</a>
<!-- 效果同: -->
<a [routerLink]="['./overview']">概览</a>
<a [routerLink]="['./logs']">日志</a>
以上不等同于以下:
<!-- 以/开头,此示例点击链接会跳转到应用的根路由,然后从根路由一路重定向下来 -->
<a [routerLink]="['/overview']">概览</a>
<a [routerLink]="['/logs']">日志</a>
示例B:相对于上一级路径进行导航,使用 ../
。
<!-- 场景:当前页面处于/xxx/xxxx/xxxxx/backlog/viewId -->
<!-- 点击”基本设置“跳转到 /xxx/xxxx/xxxxx/settings/basic -->
<!-- backlog和settings处于同一级别,属于是兄弟。 -->
<a [routerLink]="['../settings/basic']">基本设置</a>
<!-- 效果同: -->
<a [routerLink]="['../settings/', 'basic']">基本设置</a>
<!-- 效果同: -->
<a [routerLink]="['../settings', 'basic']">基本设置</a>
<!-- 效果同: -