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  > 

五、效果预览

查看更多关于Angular5学习笔记 - 路由管理（五）的详细内容...