Angular路由导航实现咨询：auth与dashboard模块公共复用及路由配置

最优方案是在方案3的基础上结合无路径公共布局路由实现，可完全规避另外两个方案的缺陷，是当前场景下最合理的选择。

其他方案缺陷说明 #

• 方案1：会在路由路径中多出不必要的/common层级，不符合你预设的/dashboard/cart这类路径规范，同时也会增加路由逻辑的复杂度，不推荐使用。
• 方案2：三个页面重复引入公共布局代码，后续如果需要修改返回按钮、新增按钮、tab导航的逻辑，需要同步修改三个位置，维护成本极高，完全不符合代码复用原则，直接排除。

具体实现方案 #

1. 先把公共布局区域（返回按钮、+add按钮、cart/delivery/users tab导航）单独封装为DashboardSubLayoutComponent，放在你现有的dashboard-common模块中导出即可，组件内部最后留一个<router-outlet>用于承载各个子页面的内容。
2. 调整dashboard模块的路由配置如下：

const routes: Routes = [
  { 
    path: '',
    component: DashboardMainComponent, // 内置全局NAV BAR
    children: [
      { path: '', component: DashboardBodyComponent }, // 原有卡片首页路由
      // 无路径公共布局父路由，不会额外增加路由层级
      {
        path: '',
        component: DashboardSubLayoutComponent,
        children: [
          // 三个子页面独立懒加载，符合方案3的设计
          { path: 'cart', loadChildren: () => import('./cart/cart.module').then(m => m.CartModule) },
          { path: 'delivery', loadChildren: () => import('./delivery/delivery.module').then(m => m.DeliveryModule) },
          { path: 'users', loadChildren: () => import('./users/users.module').then(m => m.UsersModule) }
        ]
      }
    ]
  }
];

方案优势 #

• 路由路径完全符合预设的/dashboard/cart//dashboard/delivery//dashboard/users格式，无多余层级
• 公共布局代码仅维护一份，后续迭代修改成本极低，tab激活状态可直接用Angular原生的routerLinkActive自动匹配，无需额外写逻辑
• 三个子页面独立懒加载，打包体积拆分更合理，dashboard首次加载速度更快
• 完全复用你现有的dashboard-common模块结构，改造量极小

额外优化建议 #

auth模块的login和forget-password共用背景的需求，也可以用同样的思路实现：给auth模块加一个公共布局组件，全局挂载共用背景，子路由对应login和forget-password页面，避免两个页面重复写背景相关代码。

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