Angular4默认路由重定向失效问题排查求助

我来帮你揪出这个路由重定向失效的问题，对照你的配置，梳理几个最可能的原因和验证步骤：

1. 检查父组件的路由出口是否存在 #

你的根路由把空路径指向了WebsiteComponent，并在它下面配置了子路由（包括重定向规则）。子路由的内容必须通过父组件模板里的<router-outlet></router-outlet>才能渲染出来。如果WebsiteComponent的模板里没有这个标签，即使路由重定向触发了，也看不到任何内容，看起来就像重定向没生效。

你可以打开website.component.html，确认里面是否包含这个关键标签：

<!-- WebsiteComponent模板必须包含 -->
<router-outlet></router-outlet>

2. 验证子路由的重定向规则顺序与配置 #

你的子路由里已经把重定向规则放在了最顶部，并且设置了pathMatch: "full"，这部分是正确的：

{ path: "", redirectTo: "job", pathMatch: "full" },

pathMatch: "full"确保只有当路径完全匹配空字符串时才触发重定向，避免和其他带参数的路由冲突，这一步没问题。

3. 检查懒加载模块JobSearchModule的内部路由 #

你通过loadChildren懒加载了JobSearchModule，但如果这个模块本身没有配置默认路由，即使重定向到job路径，也没有组件会被渲染，看起来也像重定向失效。

打开job-search.module.ts对应的路由文件，确认它的内部路由是否处理了空路径：

// job-search.routes.ts 示例配置
const routes: Routes = [
  // 必须配置这个默认路由，才能在访问/job时显示内容
  { path: '', component: JobSearchComponent }
];

export const jobSearchRouting = RouterModule.forChild(routes);

4. 开启路由调试模式追踪匹配过程 #

如果上面的检查都没问题，可以开启Angular路由的调试模式，查看控制台的路由匹配日志，确认重定向是否被触发：

修改app.routes.ts里的RouterModule.forRoot配置：

export const appRouting = RouterModule.forRoot(routes, { enableTracing: true });

启动项目后，打开浏览器控制台，你会看到详细的路由匹配流程，比如是否识别了空路径、是否触发了重定向到job、是否成功加载了JobSearchModule等信息，能帮你快速定位问题。

内容的提问来源于stack exchange，提问作者Ali Razmjo