最近在做一个数据中心管理的项目，项目运行后默认是登录页，登录成功后进入到系统，如图

login page

系统内部

这里有多层路由嵌套，如果按普通的路径（http://localhost:4200/home/visualization）配置的话不难，但老大要求路径是http://localhost:4200/visualization，http://localhost:4200/dashboard，由于还有一个login页，所以用如下方式配置路由：

app.routes.ts

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


export const appRoutes = [
  {
    path: '',
    loadChildren: './home/home.module#HomeModule'
  },
  {
    path: 'login',
    loadChildren: './login/login.module#LoginModule'
  }
];

app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';

import {appRoutes} from './app.routes';

import {AppComponent} from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: []
})
export class AppModule {
}

app.component.html

<router-outlet></router-outlet>

home.routes.ts

import {RouterModule} from '@angular/router';
import {HomeComponent} from "./home.component";

export const homeRoutes = [
  {
    path: '',
    component: HomeComponent,
    children: [
      {
        path: 'dashboard',
        loadChildren: '../dashboard/dashboard.module#DashboardModule'
      },
      {
        path: 'visualization',
        loadChildren: '../visualization/visualization.module#VisualizationModule'
      }
    ]
  }
];

home.components.html

<section>
  <nav>
    <ul>
      <li routerLinkActive="active">
        <a routerLink="/dashboard">dashboard</a>
      </li>
      <li routerLinkActive="active">
        <a routerLink="/visualization">visualization</a>
      </li>
    </ul>
  </nav>
  <router-outlet></router-outlet>
</section>

注意：home.components.html中routerLink的值要加斜杠‘/’，不然会报错找不到路径

appRoutes 中懒加载HomeModule时要再加一个路由守卫，后续再补上