Angular路由始终重定向至首页问题排查求助

核心问题分析 #

你的路由配置存在两个关键错误：

1. 把根组件AppComponent设为空路径的路由组件，这会导致路由系统无法正确加载其他组件——AppComponent是整个应用的根容器，应该包含<router-outlet>来承载路由组件，而不是被路由本身加载。
2. 路由模块的写法不符合当前Angular版本规范，旧的ModuleWithProviders导出方式已被弃用（针对Angular 9+）。

修复步骤 #

1. 修正app-routing.module.ts配置 #

替换为以下代码：

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { LoginComponent } from './login/login.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ShopComponent } from './shop/shop.component';

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'dashboard', component: DashboardComponent},
  { path: 'shop', component: ShopComponent },
  // 空路径重定向到登录页，pathMatch: 'full'确保完全匹配空路径
  { path: '', redirectTo: '/login', pathMatch: 'full' },
  // 可选：添加通配符路由，处理不存在的路径
  { path: '**', redirectTo: '/login' }
];

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

2. 检查AppComponent模板 #

确保app.component.html中包含路由出口标签，这是路由组件的渲染容器：

<!-- app.component.html -->
<router-outlet></router-outlet>

如果你的AppComponent有导航栏等布局内容，可保留，只要确保<router-outlet>存在即可。

3. 确认AppModule配置 #

确保AppRoutingModule已导入到AppModule中：

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { LoginComponent } from './login/login.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ShopComponent } from './shop/shop.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,
    ShopComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule // 必须导入路由模块
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

验证修复 #

启动应用后，访问/login、/dashboard、/shop应能正常导航到对应组件，空路径会自动重定向到登录页。

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