Angular6-路由-配置路由（常规路由+子路由+路由守卫）

核心ts文件

app.module.ts

下方的HomeModule是新建的模块，也是要被加载的路由模块。

import {BrowserModule} from '@angular/platform-browser';
import {enableProdMode, NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {NgZorroAntdModule, NZ_I18N, en_US, zh_CN} from 'ng-zorro-antd';
import {FormsModule} from '@angular/forms';
import {HttpClientModule} from '@angular/common/http';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {registerLocaleData} from '@angular/common';
import en from '@angular/common/locales/en';
import {AppRoutingModule} from './app.routing';
import {LoginModule} from './views/login/login.module';
import {NbMessageService} from './services/message/nb-message-service';
import {HomeModule} from './views/home/home.module';

registerLocaleData(en);
enableProdMode();

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgZorroAntdModule,
    FormsModule,
    HttpClientModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    LoginModule,
    HomeModule
  ],
  providers: [{provide: NZ_I18N, useValue: zh_CN},
    NbMessageService],
  bootstrap: [AppComponent]
})
export class AppModule {
}

app.routing.ts

下方的

{
  path: 'home',   // 主页
  component: HomeComponent
}

是要新建的home模块，要路由的模块。

import {NgModule} from '@angular/core';
import {Routes, RouterModule, PreloadAllModules} from '@angular/router';
import {LoginComponent} from './views/login/login.component';
import {HomeComponent} from './views/home/home.component';

export const ROOT_ROUTERS: Routes = [
    {
      path: 'login',   // 登陆页面
      component: LoginComponent
    },
    {
      path: 'home',   // 主页
      component: HomeComponent
    },
    {
      path: 'notFoundPage', // 找不到页面
      loadChildren: './components/not-found/nb-not-found.module#NbNotFoundModule'
    },
    {
      path: '**',           // 找不到页面
      redirectTo: 'notFoundPage',
      pathMatch: 'full'
    }

  ]
;

@NgModule({
  imports: [RouterModule.forRoot(ROOT_ROUTERS, {useHash: true, preloadingStrategy: PreloadAllModules})],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

开始路由

路由动作可以绑定在html中，也可以绑定在ts中。

ts灵活，介绍一下，不推荐html中写，耦合度太高。

跳转

因为home和login是一个层级的，无父子路由关系，直接跳转就可以了：

this.router.navigate(['/home']);

 申明子路由

比如我想要在HomeComponent中使用子路由

在home的模块下注册子路由

    RouterModule.forChild([{
      path: '',
      component: HomeComponent
    }])

配置子路由

完成