angular路由问题

Question

在layout中有一个router-outlet 承载左侧菜单的路由内容
现在想在配置信息管理的右侧content中再加一级菜单

但是现在这样写是会整个页面刷新 菜单没办法高亮 大神看一下哪里有问题呢

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> -->

setting.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,
  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' },
  ],
};

请教大神应该怎么修改

Answer 1

你这个地方给outlet起个名字没用的。路由和之前的状态没有关系，只和路由的路径有关，比如/settings/vehicle-status这个路由，和overview完全没关系，你在overview里面设置router-outlet，组件VehicleStatusComponent永远都不会放进overview的router-outlet中，因为路径/settings/vehicle-status和overview完全没关系。

VehicleStatusComponent会放到settings对应的component上的router-outlet中，你没有给settings设置component就会被放置到上层的router-outlet中。

修改的方法，假设你的overview的组件类是OverviewComponent，你还要把OverviewComponent引入：

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

export const SettingsRoute = {
  path: 'settings',
  data: { name: '配置信息设置' },
  component:OverviewComponent,
  children: [
    { path: 'vehicle-status', data: { name: '车辆状态' }, loadChildren: '@/app/settings/vehicle-status/vehicle-status.module#VehicleStatusModule' },
  ],
};