angular4 路由实际使用中的应用场景

一个十分常见的企业网站结构如图所示为：

我们会点击左侧后 右边更换Component

解决方案有很多 不难

我们可以创建一个“壳组件”，将左侧放进去，再利用路由来更改右侧Component，填充到壳组件的router-letout中达到效果

但是最佳实践是 我们全部利用路由来实现 达到最大的灵活性

在官网的英雄demo 路由篇 对这个有详细的介绍

那么 我们的路由规划应该为
主路由

const appRoutes: Routes = [
  {
    path: '业务布局',
    loadChildren: '业务布局Module',
  },
  {
    path: '关于我们',
    loadChildren: '关于我们Module',
  },
  {
    path: '合作伙伴',
    loadChildren: '合作伙伴Module',
    data: { preload: true }
  },
  {
    path: '新闻中心',
    loadChildren: '新闻中心Module',
    data: { preload: true }
  },
  {
    path: '投资者关系',
    loadChildren: '投资者关系Module',
    data: { preload: true }
  },
  { path: '',   redirectTo: '/首页', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

子路由为

const 关于我们Routes: Routes = [
  {
    path: '',
    component: 可以放一张图片Component,
    children: [
      {
        path: '',
        component: 左侧小菜单Component,
        children: [
          {
            path: '',
            component: 愿景与使命Component
          }，
          {
            path: '公司概况',
            component: 公司概况Component,
          },
          {
            path: '管理团队',
            component: 管理团队Component
          }，
          {
            path: '新闻中心',
            component: 新闻中心Component
          }，
          {
            path: '人才招聘',
            component: 人才招聘Component
          }
        ]
      }
    ]
  }
];

看下图基本就清晰了