今天使用vue的导航菜单时,遇到了一点小bug,具体问题是,指定el-menu的default-active为一个菜单内的子项后,刷新页面菜单不会展开。
后台发现是未展开菜单的index未指定,导致这个菜单不会被展开。
在此小做记录!
<template>
<el-menu
:collapse="collapse"
:default-active="$route.path"
unique-opened
collapse-transition
router
class="el-menu-vertical-demo"
>
<div class="top-logo">
<img src="../assets/logo.png" />
</div>
<div v-for="item, index of allMenu" :key="item.menuId">
<el-submenu index="index + '-1'" v-if="item.menus">
<!--注意上面这一行,index一定不能为空-->
<template slot="title">
<i :class="item.icon"></i>{{ item.menuName }}
</template>
<el-menu-item-group>
<el-menu-item
v-for="child of item.menus"
:index="child.url"
:key="child.menuId"
>
<i :class="child.icon"></i>{{ child.menuName }}
</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-menu-item :index="item.url" :key="item.menuId" v-else>
<i :class="item.icon"></i>{{ item.menuName }}
</el-menu-item>
</div>
</el-menu>
</template>