1. 1. 准备两个父路由组件
    2. 2. 在两个 父路由组件下创建两个子路由组件
    3. 3. 注册四个组件
    4. 4.在app-routing.module.ts中注册写入
    5. const routes: Routes = [
    6.   {
    7.     path:'parent',
    8.     component:ParentComponent,
    9.     // redirectTo:'/welcome',
    10.     children:[
    11.       {
    12.         path:'welcome',
    13.         component:WelcomeComponent
    14.       },
    15.       {
    16.         path:'setting',
    17.         component:SettingComponent
    18.       },
    19.       {
    20.         path:'**',
    21.         redirectTo:'welcome'
    22.       }
    23.     ]
    24.   },
    25.   {
    26.     path:'child',
    27.     component:ChilldComponent,
    28.     children:[
    29.       {
    30.         path:'plist',
    31.         component:ProductlistComponent
    32.       },
    33.       {
    34.         path:'pcate',
    35.         component:ProductcateComponent
    36.       },
    37.       {
    38.         path:'**',
    39.         redirectTo:'plist'
    40.       }
    41.     ]
    42.   },
    43.     {
    44.     path:'**',
    45.     redirectTo:'parent'
    46.   }
    47. ];
    49. 5. 在app.component.html中设置两个父路由的切换，并设置路由的位置
    50. <a [routerLink]="[ '/parent' ]">首页</a>
    51. <a [routerLink]="[ '/child' ]">商品</a>
    52. <router-outlet></router-outlet>
    55. 6.在首页组件中
    56. <div class="content">
    57.   <div class="left">
    58.     <!-- <a href="#">欢迎首页</a> -->
    59.     <a [routerLink]="[ '/parent/welcome' ]">欢迎首页</a>
    60.     <!-- <a href="#">系统设置</a> -->
    61.     <a [routerLink]="[ '/parent/setting' ]">系统设置</a>
    62.   </div>
    63.   <div class="right">
    64.     <router-outlet></router-outlet>
    65.   </div>
    66. </div>
    69. 7.在商品路由中
    71. <div class="content">
    72.   <div class="left">
    73.     <!-- <a href="#">商品分类</a> -->
    74.     <a [routerLink]="[ '/child/pcate', ]">商品分类</a>
    75.     <!-- <a href="#">商品列表</a> -->
    76.     <a [routerLink]="[ '/child/plist' ]">商品列表</a>
    77.   </div>
    78.   <div class="right">
    79.     <router-outlet></router-outlet>
    80.   </div>
    81. </div>
    85. 8.在公共样式中
    86. .content{
    87.     width: 100%;
    88.     height: 500px;
    89.     padding: 10px;
    91.     display: flex;
    92.     .left{
    93.         width: 200px;
    94.         height: 500px;
    95.         border-right: 1px solid #eee;
    96.     }
    98.     .right{
    99.         flex: 1px;
    100.     }
    103.     a{
    104.         display: block;
    105.         padding: 10px 4px;
    106.     }
    107. }