angular4定義路由遇到的那些事

1、將所有的路由寫在app.module.ts裡面

主要步驟：

1、在app.module.ts裡面引入路由模組   import { RouterModule, Routes } from '@angular/router';

2、在imports裡面匯入改模組   imports: [ RouterModule.forRoot(routes) ]，括號裡面的routers是自己       定義的路由，具體定義如下：

3、定義自己的路由如下：其中path代表路徑，component為自己定義的元件

       const routes: Routes = [

           { path: 'login', component: loginComponent}

     ];

4、總的的程式碼如下，比較簡單：

5、要是想要定義二級路由只需要給原有路由加上children即可，程式碼如下：

{

     path:'login', component: loginComponent, 

         children: [ { path:'childA', component: ChildAComponent }] 

 }

6、但是隨著業務需求的增加，路由全部寫在app裡面並不好維護，並不建議

2、將路由分離出來形成獨立的路由module，然後在app裡面匯入

主要步驟：

1、新建立一個module叫RouteRoutingModule，同樣在該檔案裡面引入路由模組

2、同樣需要在imports裡面引入RouterModule.forRoot(routes)，因為這裡面的東西需要暴露出去       給其他模組使用，所以這裡需要在exports裡面到處RouterModule， exports: [RouterModule],

3、在app.module裡面引入import { RouteRoutingModule } from './routers/routes-routing.module';         然後在inport裡面加入RouteRoutingModule 

4,、我們也可以通過loadChildren的方式引入路由

5、center.module.ts檔案如下，這樣我們就可以通過index/detail路徑訪問的center.component裡         面的東西了