博客

1.设置默认选中的key值:defaultSelectedKeys为$route.path

2.将每个菜单的key值和路由的path一样的

<div id="components">
    <a-layout>
      <a-layout-header style="background: #fff;height: 50px;padding: 0px 20px;border-bottom: 2px solid #eee;" class="flex-between-center">
        <div>
          <img src="@/assets/logo.png" height="50px"/>
          <span class="fontSize16 mleft10 weight-bold" style="color: #202325;">数据管理平台</span>
        </div>
      </a-layout-header>
      <a-layout>
        <a-layout-sider
          v-model="collapsed"
          collapsible
          :style="{ width: '100px', 'min-width': '80px',' max-width': '100px',flex: collapsed?'0 0 50px':'0 0 250px'}"
        >
          <a-menu
            mode="inline"
            :defaultSelectedKeys="[$route.path]"
            :defaultOpenKeys="['sub1', 'sub2', 'sub3']"
            :style="{ height: '100%', borderRight: 0 }"
            class="menu"
          >
            <a-sub-menu key="sub1">
              <span slot="title">
                <a-icon type="desktop" />
                <span>数据监控</span>
              </span>
              <a-menu-item key="/collectionManagement">
                <router-link  :to="{path: 'collectionManagement'}">
                  <a-icon type="eye" />
                  <span>数据监控</span>
                </router-link>
              </a-menu-item>
              <a-menu-item key="/navMonitor">
                <router-link  :to="{path: 'navMonitor'}">
                  <a-icon type="line-chart" />
                  <span>净值异常监控</span>
                </router-link>
              </a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="sub2">
              <span slot="title">
                <a-icon type="laptop" />
                <span>人工录入</span>
              </span>
              <a-menu-item key="/manualEntry">
                <router-link  :to="{path: 'manualEntry'}">
                  <a-icon type="edit" />
                  <span>人工录入</span>
                </router-link>
              </a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="sub3">
              <span slot="title"><a-icon type="form" /><span>尽调数据</span></span>
              <a-menu-item key="/observe">
                <router-link  :to="{path: 'observe'}">
                  <a-icon type="video-camera" />
                  <span>观察池</span>
                </router-link>
              </a-menu-item>
              <a-menu-item key="/cores">
                <router-link  :to="{path: 'core'}">
                  <a-icon type="setting" />
                  <span>核心池</span>
                </router-link>
              </a-menu-item>
            </a-sub-menu>
          </a-menu>
        </a-layout-sider>
        <keep-alive>
          <a-layout-content :style="{ height: windowHeight - 50 + 'px', paddingTop: fixedHeader ? '50px' : '0' ,overFlowY: 'scroll'}">
            <multi-tab v-if="multiTab"></multi-tab>
            <transition name="page-transition">
              <route-view />
            </transition>
          </a-layout-content>
        </keep-alive>
      </a-layout>
    </a-layout>
  </div>