vue-ant-design 刷新页面,根据当前路由选中相应菜单
1.设置默认选中的key值:defaultSelectedKeys为$route.path2.将每个菜单的key值和路由的path一样的<div id="components"><a-layout><a-layout-header style="background: #fff;height: 50px;padding: 0px 20...
·
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>
更多推荐
已为社区贡献9条内容
所有评论(0)