outlet的理解

outlet是占位符,也就是说解析地址实际上是把组件装到占位符里面去

outlet分为两种 一种是默认出口 一种是指定出口

<div class='left' style='border:1px solid #000;flex:1'>
        <router-outlet name='parentLeft'></router-outlet>
    </div>
    <div class='main' style='border:1px solid #000;flex:1'>
        <router-outlet ></router-outlet>
    </div>
    <div class='right' style='border:1px solid #000;flex:1'>
        <router-outlet name='parentRight'></router-outlet>
    </div>
</div>
{component:ParentComponent,path:'parent',children:[
      {component:MainComponent,path:'main'},
      {component:ChildLeftComponent,path:'left',outlet:'parentLeft'},
     {component:ChildRightComponent,path:'right',outlet:'parentRight'}
    ]}

同时把三个组件,放入到对应的占位符里面去,url应该这么写parent/(main//parentLeft:left//parentRight:right)

要想把一个组件既能够放进主占位符,又能够放进左占位符,右占位符,路由应该这么写

{component:ChildLeftComponent,path:'left'},
{component:ChildLeftComponent,path:'left',outlet:'parentRight'},
{component:ChildLeftComponent,path:'left',outlet:'parentLeft'},
相关文章
相关标签/搜索