angular6路由配置问题。

Question

在项目中需要做一个左侧导航栏，右侧显示组件内容的界面。要求在登陆之后进入index界面，index界面分为左右两个部分，左侧为导航栏，右侧为内容的显示（显示dashboard、user、order三个组件的内容）。

项目结构：

index界面代码：

<div class="container">
<div class="row">

<div class="col-lg-2 my-3">
  <div class="nav d-flex flex-lg-column flex-row">
    <a class="nav-link active p-1" routerLink="/manage/dashboard" routerLinkActive="/manage/dashboard">
      <i class="fe fe-grid mx-1"></i>
      <span class="mt-1">控制面板</span>
    </a>
    <a class="nav-link p-1" routerLink="/manage/user">
      <i class="fe fe-user mx-1"></i>
      <span class="mt-1">用户管理</span>
    </a>
    <a class="nav-link p-1" routerLink="/manage/order">
      <i class="fa fa-shopping-cart mr-1"></i>
      <span class="mt-1">订单管理</span>
    </a>
  </div>
</div>
<div class="col my-3">
  <div class="d-flex justify-content-between">
    <h2 class="display-4 title-2 text-center mb-6">
      <span>当前货币价格</span>: 1
      <span>YUAN</span>
    </h2>
    <p class="small">货币价格随市场波动而实时改变</p>
  </div>
  <router-outlet></router-outlet>
</div>

</div>
</div>
我自己的路由配置（不正确，请大神指点）：
app-routing：
const routes: Routes = [
{path: 'login', component: LoginComponent},
{path: 'index', component: IndexComponent},
{path: '', component: IndexComponent, pathMatch: 'full', canActivate: [AuthGuardService]},
{path: '**', redirectTo: '/index'}
];

core-routing：
const routes: Routes = [
{path: 'index', component: IndexComponent}
];

manage-routing：
const routes: Routes = [
{

path: 'manage',
children: [
  {path: 'dashboard', component: DashboardComponent},
  {path: 'user', component: ManageUserComponent},
  {path: 'order', component: ManageOrderComponent},
  {path: '', redirectTo: '/dashboard', pathMatch: 'prefix'}
]

},
{path: '', redirectTo: '/manage', pathMatch: 'prefix'}];

Answer 1

预先创建2个模板组件，一个是登录界面布局；一个是内容的布局；结构不一样，所以最好分开。
如：layout->full + main（FullComponent,MainComponent）
full可以是个空的页面，全屏式。
main可以是左右布局排版的，内容结构。
然后两个在相应设计中放“<router-outlet></router-outlet>”输出
最后路由中类似

RouterModule.forRoot([
        {
            path: '',
            component: FullComponent,
            children: [
                {path: '', redirectTo: 'login', pathMatch: 'full'},
                {path: 'login', component: LoginComponent}
            ]
        },
        {
            path: 'admin',
            component: MainComponent,
            canActivate: [AuthGuardService],
            children: [
                {path: '', redirectTo: 'index', pathMatch: 'full'},
            ]
        },
        {path: '**', component: NotFoundComponent}
    ])

Answer 2

既然是index下写了router-outlet出口,路由也应在index下的children中配置完成