说明:router-outlet 是应用中的路由插座,一个页面中可以使用一个或多个router-outlet
1.只使用一个router-outlet
父组件:
<router-outlet></router-outlet>
子组件:
<p>123456</p>
页面显示:
2.单页面使用两个router-outlet(多个和两个原理相同)
父组件html:
<div style="font-size:20px;"> <router-outlet name="left"></router-outlet> </div> <div style="color:red;"> <router-outlet name="right"></router-outlet> </div>
<--这里name对应的left和right必须和module里面的outlet相对应-->
父组件module:
export const rou:Routes = [ { path:'', component:LeftComponent, outlet:'left' }, { path:'', component:RightComponent, outlet:'right' } ]
子组件left:
<p>123456<p>
子组件right:
<p>654321</p>
页面显示效果: