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
}
]
}
]
}
];

看下图基本就清晰了