Angular路由重定向配置问题：基于Angular Cli配置多模块路由默认跳转

嘿，我来帮你梳理下符合需求的Angular路由配置方案，刚好你的模块分层（App、Auth、Login）很清晰，咱们先指出现有配置的小问题，再给出正确的配置：

你的核心需求：

• 根路径 / 自动重定向到 /auth
• /auth 自动重定向到 /auth/login
• 支持 /auth/register 等其他Auth相关子路由

1. 修正App模块路由配置 #

你的现有App路由已经做了根路径重定向，但缺少把/auth路径分发给Auth模块的配置，补充后如下：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const routes: Routes = [
  // 根路径完全匹配时，重定向到/auth
  { path: '', pathMatch: 'full', redirectTo: 'auth' },
  // 将/auth路径交给Auth模块处理（用Angular 8+推荐的动态导入懒加载）
  { path: 'auth', loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule) },
  // 404页面一定要放在最后，匹配所有未定义的路径
  { path: '**', component: PageNotFoundComponent }
];

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

2. 修正Auth模块路由配置 #

你之前的Auth路由里多套了一层path: 'auth'，这会导致路由变成/auth/auth/login（因为App模块已经把/auth交给Auth模块了），所以要去掉这一层，直接配置相对于/auth的子路由：

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

const routes: Routes = [
  // /auth路径完全匹配时，重定向到login（即最终跳转到/auth/login）
  { path: '', pathMatch: 'full', redirectTo: 'login' },
  // 懒加载Login模块，对应路径/auth/login
  { path: 'login', loadChildren: () => import('./login/login.module').then(m => m.LoginModule) },
  // 添加/auth/register路由，同理可以懒加载Register模块（如果有的话）
  { path: 'register', loadChildren: () => import('./register/register.module').then(m => m.RegisterModule) },
  // 还可以添加其他Auth相关路由，比如/auth/forgot-password等
];

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

3. Login模块路由配置 #

Login模块的路由是相对于/auth/login的，只需要配置默认加载Login组件即可：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login.component';

const routes: Routes = [
  // /auth/login路径直接加载LoginComponent
  { path: '', component: LoginComponent }
];

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

关键注意点 #

• 路由层级匹配：子模块的路由是相对路径，父模块分配的路径会自动作为前缀，所以Auth模块不需要再声明path: 'auth'
• 懒加载语法：放弃旧的字符串路径（./login/login.module#LoginModule），使用import()动态导入，这是Angular 8+的推荐写法，支持Tree Shaking和更好的类型检查
• pathMatch: 'full'：重定向时必须加上这个属性，确保只有当路径完全匹配时才触发重定向，避免路由匹配混乱

配置完成后，就能实现：

• 访问 / → 自动跳转到 /auth → 自动跳转到 /auth/login
• 直接访问 /auth/register 可以正常加载注册模块
• 任何未定义的路径都会跳转到404页面

内容的提问来源于stack exchange，提问作者Dominik Kajzar