angular loadChildren 懒加载路由为啥刷新页面了

Question

settings.route.ts

import { LoginLayout } from '@/layouts/login/login.layout';
import { VehicleStatusComponent } from './vehicle-status/vehicle-status.component';
import { SettingsComponent } from './settings.component';

export const SettingsRoute = {
  path: 'settings',
  data: { name: '配置信息设置' },
  component: SettingsComponent,
  // outlet: 'settings',
  children: [
    { path: '', pathMatch: 'full', redirectTo: 'group' },
    { path: 'group', data: { name: '车队' }, loadChildren: '@/app/settings/group/group.module#GroupModule' },
    { path: 'vehicle-status', data: { name: '车辆状态' }, loadChildren: '@/app/settings/vehicle-status/vehicle-status.module#VehicleStatusModule' },
    { path: 'fuel-types', data: { name: '燃料类型' }, loadChildren: '@/app/settings/fuel-types/fuel-types.module#FuelTypesModule' },
  ],
};

settings.html

<!-- <nz-card> -->
<div nz-row>
  <div nz-col nzSpan='4'>
    <ul nz-menu [nzMode]="'inline'">
      <li nz-menu-item nz-tooltip nzPlacement="right" [routerLink]="['/settings/group']">
        <span title>
                 <span>车队</span>
        </span>
      </li>
      <li nz-menu-item nz-tooltip nzPlacement="right" [routerLink]="['/settings/vehicle-status']">
        <span title>
                 <span>车辆状态</span>
        </span>
      </li>
      <li nz-menu-item nz-tooltip nzPlacement="right" [routerLink]="['/settings/fuel-types']">
        <span title>
                 <span>能源类型</span>
        </span>
      </li>
    </ul>
  </div>
  <div nz-col nzSpan='19' nzOffset='1'>
    <router-outlet></router-outlet>
  </div>
</div>
<!-- </nz-card> -->

为什么现在点击左侧菜单本来应该加载右边占位符的部分 但是连着左边的菜单都刷新了
小白求指路

Answer 1

求大神帮小白解答一下