Angular路由的一些思考与验证

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]="[