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

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

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

解决方案有很多 不难

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

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

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

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

const appRoutes: Routes = [
  {
    path: '业务布局',loadChildren: '业务布局Module',},{
    path: '关于我们',loadChildren: '关于我们Module',{
    path: '合作伙伴',loadChildren: '合作伙伴Module',data: { preload: true }
  },{
    path: '新闻中心',loadChildren: '新闻中心Module',{
    path: '投资者关系',loadChildren: '投资者关系Module',{ 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
          }
        ]
      }
    ]
  }
];

看下图基本就清晰了

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!