配置一个显示在辅助路由上的组件

与其他的组件配置方式类似,只是添加了 outlet:’aux’属性，aux为辅助路由的名字

  {
    path: 'auxRouting',
    component:Tab3Component,
    outlet:'aux'
  }

添加同级的router-outlet并添加name（name=’aux’的router-outlet为辅助路由）

<div class="pri">
  <router-outlet></router-outlet>
</div>
<div class="sec">
  <router-outlet name="aux"></router-outlet>
</div>
//样式
.pri{
  background: aqua;
  width: 200px;
  height: 200px;
}
.sec{
  width: 200px;
  height: 200px;
  background: aquamarine;
}

a标签打开关闭辅助路由

<a [routerLink]="[{outlets:{aux:'auxRouting'}}]" >辅助路由</a>
<a [routerLink]="[{outlets:{aux:null}}]" >关闭辅助路由</a>

另外a标签

<a [routerLink]="['/index']">首页</a>
<a [routerLink]="['/secound']" >同级页面</a>

打开路由

关闭路由

a标签上添加primary可以跳转在某个路由下显示辅助路由

<a [routerLink]="[{outlets:{primary:'index',aux:'auxRouting'}}]" >辅助路由</a>

此时点击辅助路由

跳转到首页