Question

我有以下设置（为简单起见省略了事情）：

app/
  *app-routing.module
  *app.component
  *dashboard/
      *dashboard-routing.module
      *dashboard.component
      *dashboard-home/
          *dashboard-home.component

和相关代码：

仪表板的路由选择：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes }   from '@angular/router';

// owned components
import { DashboardComponent } from './dashboard.component';
import { DashboardHomeComponent } from './dashboard-home/index';

// guards
import { AuthGuard } from '../core/index';

export const dashboardRoutedComponents = [DashboardComponent, DashboardHomeComponent];

const routes: Routes = [
  { path: '', redirectTo: '/dashboard/home', pathMatch: 'full' },
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: 'home',
        component: DashboardHomeComponent
      }
    ]
  }
];

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

应用程序的路由：

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

// guards
import { AuthGuard } from './core/index';

@NgModule({
  imports: [
    RouterModule.forRoot([
      {path: '', redirectTo: 'dashboard', pathMatch: 'full', canActivate: [AuthGuard] }
    ])
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {}

export const appRoutedComponents = [];

我的问题是，当我导航到localhost:4200时，它会将我重定向到localhost:4200/dashboard。如果我然后刷新页面，则会将我从localhost:4200/dashboard重定向到localhost:4200/dashboard/home。知道怎么让它从localhost:4200/dashboard/home直接跳到localhost:4200？

祝你好运

Answer 1

这似乎有效，但不确定是否正确

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes }   from '@angular/router';

// owned components
import { DashboardComponent } from './dashboard.component';
import { DashboardHomeComponent } from './dashboard-home/index';

// guards
import { AuthGuard } from '../core/index';

export const dashboardRoutedComponents = [DashboardComponent, DashboardHomeComponent];

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: '',
        redirectTo: 'home',
        pathMatch: 'full'
      },
      {
        path: 'home',
        component: DashboardHomeComponent
      }
    ]
  }
];

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

Angular2路由功能模块重定向到内部

1 个答案: