九，angular6-路由

1.使用脚手架工具生成路由

ng generate module app-routing --flat --module=app

（1）--flat表示不生成文件夹，而是生成平级文件。

（2）--module==app表示将改文件注入到app.module.ts中的import中，不用手动引用

2 .修改生成的路由文件

import {NgModule} from "@angular/core";
import {RouterModule, Routes} from "@angular/router";
import {AppComponent} from "./app.component";
import {MyFirstComponnetComponent} from "./my-first-componnet/my-first-componnet.component";
import {MySecondComponentComponent} from "./my-second-component/my-second-component.component";

const routes:Routes = [
  {path:'',redirectTo:'myPage',pathMatch:'full'},
  { path: 'myPage', component: AppComponent},
  { path: 'firstPage', component: MyFirstComponnetComponent},
  { path: 'secondPage', component: MySecondComponentComponent}
]

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [ RouterModule ]
})
export class AppRoutingModule { }

{path:'',redirectTo:'myPage',pathMatch:'full'}表示默认路径

3.app.component.html中添加路由

  
主页面
  

4.启动项目 ng serve

如要访问第二个页面的路径：http://localhost:4200/secondPage