Angular5学习笔记 - 路由管理（五）

一、添加路由管理引用

打开src/app/app.module.ts文件

import {RouterModule} from '@angular/router';
import {Routes} from '@angular/router';

二、设置管理

打开src/app/app.module.ts文件

const appRoutes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: '',
    component: NavbarComponent,
    outlet: 'right' /* 设置路由器的位置 */
  },
  {
    path: '',
    component: SidebarComponent,
    outlet: 'left' /* 设置路由器的位置 */
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'register',
    component: RegisterComponent
  },
  {
    path: 'setting',
    component: SettingsComponent
  },
  {
    path: '404',
    component: PageNotFountComponent
  },
]

三、注入路由

打开src/app/app.module.ts文件

  /* 注册模块 */
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes) /*注册路由*/
  ],

四、在画面中引入

打开src/app/app.component.html，修改内容为

<!-- 导航条 -->
<app-navbar></app-navbar>
<br/>
<br/>
<br/>
<!-- 内容 -->
<div class="container-fluid">
  <div class="row">
    <!--左边导航-->
    <router-outlet name="left"></router-outlet>
    <!--内容-->
    <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
      <router-outlet></router-outlet>
    </main>
  </div>
</div>

五、效果预览