Angular如何配置嵌套路由在Layout组件内加载Dashboard子路径对应页面

修改方案 #

你需要使用Angular路由的**子路由（children）**配置实现嵌套路由效果，具体调整如下：

1. 调整路由配置 #

修改app.routing.ts中的appRoutes数组，将StatsComponent从根路由移到Dashboard路由的children配置项中：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LayoutComponent } from './layout/layout.component';
import { LoginComponent } from './screens/auth/login/login.component';
import { StatsComponent } from './screens/stats/stats.component';

const appRoutes: Routes = [
  { path: '', component: LoginComponent },
  { 
    path: 'Dashboard', 
    component: LayoutComponent,
    // 子路由配置：所有子路径的内容都会渲染到LayoutComponent的<router-outlet>中
    children: [
      // 访问/Dashboard/stats时渲染StatsComponent
      { path: 'stats', component: StatsComponent },
      // 可选配置：访问/Dashboard时默认重定向到/Dashboard/stats
      { path: '', redirectTo: 'stats', pathMatch: 'full' }
    ]
  },
  { path: 'login', component: LoginComponent }
];
@NgModule({
  imports: [RouterModule.forRoot(appRoutes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 路由跳转说明 #

• 调整后访问/Dashboard/stats路径时，LayoutComponent的公共布局（navbar、sidebar、footer）会保留，StatsComponent会渲染到Layout内部的<router-outlet>占位符中
• 如果需要在侧边栏添加跳转到统计页的链接，routerLink写法如下：

  <a routerLink="/Dashboard/stats" routerLinkActive="active">统计页</a>
  

• 你当前登录页里的routerLink="/Dashboard/login"是错误配置，login为根路由，跳转登录应该写routerLink="/login"

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