如何实现含router-outlet的侧边导航与独立登录页的简洁路由配置

Got it, let's work through this issue where your authenticated content isn't showing up properly next to the sidenav, while keeping clean route URLs (no auxiliary routes needed). Here's the step-by-step fix:

核心问题分析 #

Your original setup had the global <router-outlet> outside the sidenav container, so authenticated content components (Home, Data, Projects) were rendering alongside the sidenav instead of inside the designated content area. We need to nest the content routing within the authenticated layout structure.

Step 1: 创建认证专属布局组件 #

首先，新建一个专门的布局组件来承载导航栏、工具栏、侧边栏和内容路由出口，这样能让根组件更简洁，同时分离认证相关的UI结构：

// layout.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-authenticated-layout',
  templateUrl: './layout.component.html',
  styleUrls: ['./layout.component.css']
})
export class AuthenticatedLayoutComponent {}

然后更新它的模板，把侧边栏和内容出口嵌套在正确的容器里：

<!-- layout.component.html -->
<app-custom-navbar></app-custom-navbar>
<app-custom-toolbar></app-custom-toolbar>

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav>
    <!-- 这里放你原有的侧边导航链接 -->
    <a routerLink="/" class="nav-link">Home</a>
    <a routerLink="/data" class="nav-link">Data</a>
    <a routerLink="/projects" class="nav-link">Projects</a>
  </mat-sidenav>

  <mat-sidenav-content class="content-area">
    <!-- 这个出口会渲染你的认证后内容组件 -->
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

添加基础CSS确保侧边栏容器占满合适高度：

/* layout.component.css */
.sidenav-container {
  height: calc(100vh - 64px); /* 根据你的导航栏/工具栏高度调整数值 */
}

.content-area {
  padding: 16px;
}

Step 2: 重构路由配置 #

现在调整路由结构，把需要认证的组件作为布局组件的子路由，这样既能保持简洁的URL（/data、/projects），又能让内容和认证UI正确关联：

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';
import { DataComponent } from './data/data.component';
import { ProjectsComponent } from './projects/projects.component';
import { AuthenticationGuard } from './guards/authentication.guard';
import { AuthenticatedLayoutComponent } from './layout/layout.component';

const routes: Routes = [
  // 公开的登录路由
  { path: 'login', component: LoginComponent },

  // 带布局的认证父路由
  {
    path: '',
    canActivate: [AuthenticationGuard],
    component: AuthenticatedLayoutComponent,
    children: [
      { path: '', component: HomeComponent }, // 默认显示Home组件
      { path: 'data', component: DataComponent },
      { path: 'projects', component: ProjectsComponent },
    ]
  },

  // 兜底重定向：根据认证状态跳转首页或登录页
  { path: '**', redirectTo: localStorage.getItem('authToken') ? '' : '/login' }
];

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

Step 3: 简化根组件 #

修改app.component.html，只保留全局路由出口——让路由系统自动根据认证状态渲染登录页或认证布局：

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

方案优势 #

• 简洁URL：保持了/data、/projects这类直观路径，无需使用辅助路由的复杂语法（比如(sidebar:data)）。
• 布局正确嵌套：认证后的内容组件会渲染在<mat-sidenav-content>区域内，和侧边栏形成正确的布局关系，不会出现空间冲突。
• 认证守卫生效：父路由上的canActivate守卫会自动拦截未认证用户，跳转到登录页，和你原本的需求保持一致。

小提示 #

• 确保你的AuthenticationGuard能正确判断用户认证状态，并在未认证时重定向到/login。
• 根据实际导航栏/工具栏的高度调整侧边栏容器的CSS高度，避免出现滚动条或布局间隙。

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