Angular路由跳转后URL更新但页面内容不显示问题求助

问题根源 #

你把DashboardComponent作为LoginComponent的子路由是错误的——Angular中子路由组件会渲染在父组件的<router-outlet>内，这就导致Dashboard会显示在登录页下方，而不是替换登录页。保护路由的正确方式是使用路由守卫，而非嵌套路由结构。

解决步骤 #

1. 恢复独立路由结构 #

回到你之前的组件结构，让LoginComponent和DashboardComponent成为同级路由：

AuthModule
  _LoginComponent (独立路由)
  _DashboardComponent (独立路由)
     _HomeComponent (Dashboard的子路由)
     _StatisticsComponent (Dashboard的子路由)
     _ParametersComponent (Dashboard的子路由)
     _NotificationsComponent (Dashboard的子路由)
SharedModule

2. 创建路由守卫（AuthGuard） #

生成一个路由守卫验证用户登录状态，未登录时自动重定向到登录页：

// auth.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AuthService } from './auth.service'; // 假设你有AuthService管理登录状态

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    if (this.authService.isLoggedIn()) { // 实现isLoggedIn方法判断用户是否已登录
      return true;
    }
    // 未登录时重定向到登录页，同时保存当前路由，方便登录后跳转回原页面
    this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
    return false;
  }
}

3. 修改路由配置 #

调整路由结构，给Dashboard路由添加守卫，保持Login和Dashboard同级：

const routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'login', component: LoginComponent },
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [AuthGuard], // 给Dashboard添加路由守卫
    children: [
      { path: '', redirectTo: 'home', pathMatch: 'full' },
      { path: 'home', component: HomeComponent },
      { path: 'statistics', component: StatisticsComponent },
      { path: 'parameters', component: ParametersComponent },
      { path: 'notifications', component: NotificationsComponent },
    ]
  }
];

4. 调整登录成功后的跳转逻辑 #

在LoginEffect中修改跳转路径，同时支持跳转回登录前尝试访问的页面：

tap(() => {
  if (request.user.response == 'ok') {
    // 标记用户已登录（调用AuthService的登录状态更新方法）
    this.authService.login();
    // 获取登录前的目标路由，没有则默认跳转到dashboard
    const returnUrl = this.router.routerState.snapshot.root.queryParams['returnUrl'] || '/dashboard';
    this.router.navigate([returnUrl]);
  } else {
    this.router.navigate(['/login']);
  }
})

5. 模板校验 #

• login.component.html不需要添加<router-outlet>，因为它是独立路由，跳转后会被Dashboard完全替换。
• dashboard.component.html中的<router-outlet>保留，用来渲染Home等子组件，这部分配置是正确的。

关键说明 #

• 路由守卫是Angular官方推荐的路由保护方案，能精准拦截未授权访问。
• 同级路由跳转时，Angular会替换整个页面的路由组件，完全符合你“登录后登录页消失、显示Dashboard”的需求。

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