Question

我有一个包含多个模块的应用程序，每个模块至少有1条路由，并且有一个核心模块可以全部导入。

这很好，我可以毫无问题地浏览不同模块上的不同路线。

然后，我实现了一个登录视图，该视图在成功登录后将用户重定向到仪表板。这样做很好，但是当我尝试导航时，URL更改了，但是内容保持不变：

this.router.navigateByUrl('/s1-customer-information/dashboard');

这是带有我用来导航的菜单的html：

  <div id="mySidenav" class="sidenav">
    <a href="javascript:void(0)" class="closebtn" (click)="closeNav()">&times;</a>
    <a routerLink="/s1-customer-information">S1 Customer Information</a>
    <a routerLink="/s2-orders-products">S2 Orders and Products</a>
    <a routerLink="/s3-track-drivers">S3 Track and Drivers</a>
    <a routerLink="/s4-invoices-payments">S4 Invoices and Payments</a>
    <a routerLink="/s5-user-management">S5 User Management</a>
    <a routerLink="/authentication">Login</a>
    <a (click)="logout()">Logout</a>
  </div>

这些是我两个模块上的路线：

const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: S1DashboardComponent },
];

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

-

const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: S2DashboardComponent },
];

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

这是路由核心模块：

const routes: Routes = [
  {
    path: 'authentication',
    loadChildren: '../authentication/authentication.module#AuthenticationModule'
  },
  {
    path: 's1-customer-information',
    loadChildren: '../s1-customer-information/s1-customer-information.module#S1CustomerInformationModule',
    canActivate: [AuthenticationGuard]
  },
  {
    path: 's2-orders-products',
    loadChildren: '../s2-orders-products/s2-orders-products.module#S2OrdersProductsModule',
    canActivate: [AuthenticationGuard]
  },
  {
    path: 's3-track-drivers',
    loadChildren: '../s3-track-drivers/s3-track-drivers.module#S3TrackDriversModule',
    canActivate: [AuthenticationGuard]
  },
  {
    path: 's4-invoices-payments',
    loadChildren: '../s4-invoices-payments/s4-invoices-payments.module#S4InvoicesPaymentsModule',
    canActivate: [AuthenticationGuard]
  },
  {
    path: 's5-user-management',
    loadChildren: '../s5-user-management/s5-user-management.module#S5UserManagementModule',
    canActivate: [AuthenticationGuard]
  }
];

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

export class CoreRoutingModule {  }

导航后角路由中断

0 个答案: