vue-ant-design 刷新页面,根据当前路由选中相应菜单

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>

 

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值