升级到 Angular 2.4.3：路由 redirectTo 不再起作用

Question

自从我更新了我的 angular 2 包（到版本 2.4.3）后，我发现 redirectTo 不再起作用了。

这是我的 app.routing.ts：

import { ModuleWithProviders } from '@angular/core'
import { Routes, RouterModule } from '@angular/router';

import { Features } from "./views/features/features.component";
import { Pricing } from "./views/pricing/pricing.component";
import { PricingFree } from "./views/pricing/free/pricing.free.component";
import { PricingPersonal } from "./views/pricing/personal/pricing.personal.component";
import { PricingMedium } from "./views/pricing/medium/pricing.medium.component";
import { PricingLarge } from "./views/pricing/large/pricing.large.component";
import { PricingEnterprise } from "./views/pricing/enterprise/pricing.enterprise.component";
import { AboutSite } from "./views/about-site/about-site.component";
import { AboutCompany } from "./views/about-company/about-company.component";
import { ContactUs } from "./views/contact-us/contact-us.component";
import { NoContent } from './views/no-content';

import { DataResolver } from './app.resolver';

const appRoutes: Routes = [
  { path: "features", component: Features },
  { path: "pricing", component: Pricing },
  { path: "pricing/free", component: PricingFree },
  { path: "pricing/personal", component: PricingPersonal },
  { path: "pricing/medium", component: PricingMedium },
  { path: "pricing/large", component: PricingLarge },
  { path: "pricing/enterprise", component: PricingEnterprise },
  { path: "about-site", component: AboutSite },
  { path: "about-company", component: AboutCompany },
  { path: "contact-us", component: ContactUs },

  // Redirects
  { path: "", redirectTo: "/features", pathMatch: "full" },
  { path: "dashboard", redirectTo: "/dashboard/home", pathMatch: "full" },
  { path: "docs", redirectTo: "/docs/home", pathMatch: "full" },

  { path: '**', component: NoContent }
];

export const appRouting: ModuleWithProviders = RouterModule.forRoot(appRoutes);

例如，让我们看看通常重定向到dashboard/home 的仪表板，我让它在没有前导斜杠（“dashboard/home”而不是“/dashboard/home”）甚至没有 pathMatch="full"。

这是我的dashboard.routing.ts：

import { ModuleWithProviders } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";

import { Dashboard } from "./dashboard.component";
import { DashboardHome } from "./home/dashboard.home.component";
import { DashboardProjects } from "./projects/dashboard.projects.component";
import { DashboardProjectsDetail } from "./projects/detail/dashboard.projects-detail.component";
import { DashboardProjectsCreate } from "./projects/create/dashboard.projects-create.component";
import { DashboardProjectsUpdate } from "./projects/update/dashboard.projects-update.component";
import { DashboardJobs } from "./jobs/dashboard.jobs.component";
import { DashboardJobsDetail } from "./jobs/detail/dashboard.jobs-detail.component";
import { DashboardReports } from "./reports/dashboard.reports.component";
import { DashboardOrganizationInfo } from "./organization-info/dashboard.organization-info.component";

import { AuthGuard } from '../../helpers/auth-guard';

const dashboardRoutes: Routes = [
    {
        path: "dashboard", component: Dashboard, canActivate: [AuthGuard], children: [
            { path: "home", component: DashboardHome, canActivateChild: [AuthGuard] },
            { path: "projects", component: DashboardProjects, canActivateChild: [AuthGuard] },
            { path: "projects/create", component: DashboardProjectsCreate, canActivateChild: [AuthGuard] },
            { path: "projects/detail/:id", component: DashboardProjectsDetail, canActivateChild: [AuthGuard] },
            { path: "projects/update/:id", component: DashboardProjectsUpdate, canActivateChild: [AuthGuard] },
            { path: "projects/update/:id/:version", component: DashboardProjectsUpdate, canActivateChild: [AuthGuard] },
            { path: "jobs", component: DashboardJobs, canActivateChild: [AuthGuard] },
            { path: "jobs/detail/:id", component: DashboardJobsDetail, canActivateChild: [AuthGuard] },
            { path: "reports", component: DashboardReports, canActivateChild: [AuthGuard] },
            { path: "organization-info", component: DashboardOrganizationInfo, canActivateChild: [AuthGuard] }          
        ]
    }
];

export const dashboardRouting: ModuleWithProviders = RouterModule.forChild(dashboardRoutes);

我在 import 的 app.module.ts 中添加了 appRouting：

import { appRouting } from './app.routing';
import { DashboardModule } from "./views/dashboard/dashboard.module";

@NgModule({
    imports: [ DashboardModule, appRouting ]
    ...
    })

我在dashboard.module.ts中添加了dashboardRouting：

import { dashboardRouting } from "./dashboard.routing";

@NgModule({
    imports: [ dashboardRouting ]
    ...
    })

控制台中没有错误，当我第一次加载应用程序时，它确实从 localhost:3000 重定向到 localhost:3000/features 很奇怪。

我遵循了 Angular 2 文档，我没有发现他们的代码和我的代码有任何差异。

当我单击 routerLink 到仪表板 (<a routerLink="/dashboard">) 时，甚至当我在 localhost:3000/dashboard url 刷新页面时，它都不起作用。

Answer 1

将app.routing 中的重定向更改为子路由的顶层（即，将/dashboard/home 重定向到/dashboard）。然后在子路由中添加一个空白路由重定向到默认路由（即将空白子路由添加到/home）

查看下面的代码（对docs进行类似的更改）：

app.routing 路由

const appRoutes: Routes = [
  { path: "features", component: Features },
  { path: "pricing", component: Pricing },
  { path: "pricing/free", component: PricingFree },
  { path: "pricing/personal", component: PricingPersonal },
  { path: "pricing/medium", component: PricingMedium },
  { path: "pricing/large", component: PricingLarge },
  { path: "pricing/enterprise", component: PricingEnterprise },
  { path: "about-site", component: AboutSite },
  { path: "about-company", component: AboutCompany },
  { path: "contact-us", component: ContactUs },

  // Redirects
  { path: "", redirectTo: "/features", pathMatch: "full" },

  // ==>> Redirect to '/dashboard' instead of '/dashboard/home'
  { path: "dashboard", redirectTo: "/dashboard", pathMatch: "full" },  

  // ==>> Redirect to '/docs' instead of '/docs/home'
  { path: "docs", redirectTo: "/docs", pathMatch: "full" },

  { path: '**', component: NoContent }
];

dashboard.routing 路线

const dashboardRoutes: Routes = [
    {
        path: "dashboard", component: Dashboard, canActivate: [AuthGuard], children: [
            // ==>> Add a blank child route redirect to '/home' child
            { path: "", redirectTo: "home", pathMatch: "full" },
            { path: "home", component: DashboardHome, canActivateChild: [AuthGuard] },
            { path: "projects", component: DashboardProjects, canActivateChild: [AuthGuard] },
            { path: "projects/create", component: DashboardProjectsCreate, canActivateChild: [AuthGuard] },
            { path: "projects/detail/:id", component: DashboardProjectsDetail, canActivateChild: [AuthGuard] },
            { path: "projects/update/:id", component: DashboardProjectsUpdate, canActivateChild: [AuthGuard] },
            { path: "projects/update/:id/:version", component: DashboardProjectsUpdate, canActivateChild: [AuthGuard] },
            { path: "jobs", component: DashboardJobs, canActivateChild: [AuthGuard] },
            { path: "jobs/detail/:id", component: DashboardJobsDetail, canActivateChild: [AuthGuard] },
            { path: "reports", component: DashboardReports, canActivateChild: [AuthGuard] },
            { path: "organization-info", component: DashboardOrganizationInfo, canActivateChild: [AuthGuard] }          
        ]
    }
];