Angular 5路由异常：访问非首页URL始终重定向至首页

嘿，我仔细看了你的代码结构和问题描述，马上就发现了问题所在——你在多个模块里调用了RouterModule.forRoot()，这就是导致所有非首页URL都被重定向到首页的元凶！

问题根源 #

Angular中，RouterModule.forRoot()是专门用来配置根路由的方法，它会创建一个包含路由核心服务提供商的模块，而且这个方法只能在根模块（也就是你的AppModule）中调用一次。如果子模块（比如你的AuthModule）也用forRoot()来注册路由，会直接导致路由配置冲突：你的AuthRoutingModule里的/login、/register路由会被AppRoutingModule的通配符路由（path: '**'）覆盖，最终所有不匹配根路径的URL都被导向了LayoutComponent和PUBLIC_ROUTES对应的首页。

修复步骤 #

只需要修改auth-routing.module.ts中的路由注册方式，把forRoot()换成forChild()即可：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { NoAuthGuard } from '../auth/no-auth-guard.service';
import { HomeAuthResolver } from '../layout/home-auth-resolver.service';
import { AuthComponent } from '../auth/components/index';

const routes: Routes = [
 { path: 'login', component: AuthComponent},
 { path: 'register', component: AuthComponent }
];

@NgModule({
 imports: [
 CommonModule,
 RouterModule.forChild(routes) // 这里把forRoot改成forChild！
 ],
 exports: [RouterModule]
})
export class AuthRoutingModule { }

额外检查点 #

• 确认AppRoutingModule中的RouterModule.forRoot()是唯一的，这点你目前的代码已经做到了，没问题。
• 检查PUBLIC_ROUTES的配置，确保其中包含首页的路由规则，比如：

export const PUBLIC_ROUTES: Routes = [
  { path: '', component: HomeComponent }
];

这样根路径/会正确渲染首页，而/login、/register也能正常匹配到AuthComponent。

小提示 #

以后拆分模块路由的时候，记住这个核心规则：根路由用forRoot，子模块路由全部用forChild，这样路由层次清晰，也不会再出现类似的冲突问题啦！

内容的提问来源于stack exchange，提问作者isanka thalagala